Component documentation
SGUI / Development
Shared message placement defaults with nested scopes and individual field overrides.
Loading examples…
Loading examples…
Loading examples…
No fixed SGUI child components.
No direct parents in the documented component catalog.
'use client';
import { useState } from 'react';
import {FormFieldScope,TextField,Select,Stack} from '@structured-growth/sg-ui';
import {TextArea} from '@structured-growth/sg-ui/experimental';
export default function ScopedFormFieldsExample() {
const [name,setName]=useState("Ada");
const [country,setCountry]=useState("us");
const [notes,setNotes]=useState("");
return (
<>
<FormFieldScope descriptionPlacement="below" errorPlacement="above">
<Stack gap={4} align="start">
<TextField label="Name" description="As shown on your account." value={name} onValueChange={setName} invalid errorMessage="Confirm your name."/>
<FormFieldScope errorPlacement="below">
<Select label="Country" description="Where you live." options={[{id:'us',label:'United States'},{id:'ca',label:'Canada'}]} value={country} onValueChange={value=>setCountry(value??'')} invalid errorMessage="Confirm your country."/>
</FormFieldScope>
<TextArea label="Notes" description="Optional details." descriptionPlacement="above" errorPlacement="below" value={notes} onValueChange={setNotes}/>
</Stack>
</FormFieldScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {FormFieldScope,TextField,Select,Stack} from '@structured-growth/sg-ui';
import {TextArea} from '@structured-growth/sg-ui/experimental';
export default function ScopedFormFieldsExample() {
const [name,setName]=useState("Ada");
const [country,setCountry]=useState("us");
const [notes,setNotes]=useState("");
return (
<>
<ThemeScope density="compact">
<FormFieldScope descriptionPlacement="below" errorPlacement="above">
<Stack gap={4} align="start">
<TextField label="Name" description="As shown on your account." value={name} onValueChange={setName} invalid errorMessage="Confirm your name."/>
<FormFieldScope errorPlacement="below">
<Select label="Country" description="Where you live." options={[{id:'us',label:'United States'},{id:'ca',label:'Canada'}]} value={country} onValueChange={value=>setCountry(value??'')} invalid errorMessage="Confirm your country."/>
</FormFieldScope>
<TextArea label="Notes" description="Optional details." descriptionPlacement="above" errorPlacement="below" value={notes} onValueChange={setNotes}/>
</Stack>
</FormFieldScope>
</ThemeScope>
</>
);
}
'use client';
import { useState } from 'react';
import { ThemeScope } from '@structured-growth/sg-ui/theme';
import {FormFieldScope,TextField,Select,Stack} from '@structured-growth/sg-ui';
import {TextArea} from '@structured-growth/sg-ui/experimental';
export default function ScopedFormFieldsExample() {
const [name,setName]=useState("Ada");
const [country,setCountry]=useState("us");
const [notes,setNotes]=useState("");
return (
<>
<ThemeScope density="comfortable">
<FormFieldScope descriptionPlacement="below" errorPlacement="above">
<Stack gap={4} align="start">
<TextField label="Name" description="As shown on your account." value={name} onValueChange={setName} invalid errorMessage="Confirm your name."/>
<FormFieldScope errorPlacement="below">
<Select label="Country" description="Where you live." options={[{id:'us',label:'United States'},{id:'ca',label:'Canada'}]} value={country} onValueChange={value=>setCountry(value??'')} invalid errorMessage="Confirm your country."/>
</FormFieldScope>
<TextArea label="Notes" description="Optional details." descriptionPlacement="above" errorPlacement="below" value={notes} onValueChange={setNotes}/>
</Stack>
</FormFieldScope>
</ThemeScope>
</>
);
}