1.2.0 • Published 4 months ago
@spark-web/fieldset v1.2.0
title: Fieldset storybookPath: forms-fieldset--default
isExperimentalPackage: true
Use the Fieldset
to group thematically related controls in a form.
<Fieldset legend="Billing address">
<Stack gap="small">
<Field label="Street">
<TextInput />
</Field>
<Field label="City">
<TextInput />
</Field>
<Field label="State">
<Select
onChange={() => {}}
options={[
{ label: 'New South Wales', value: 'NSW' },
{ label: 'Victoria', value: 'VIC' },
{ label: 'Queensland', value: 'QLD' },
{ label: 'South Australia', value: 'SA' },
{ label: 'Western Australia', value: 'WA' },
{ label: 'Tasmania', value: 'TAS' },
{ label: 'Northern Territory', value: 'NT' },
{ label: 'Australian Capital Territory', value: 'ACT' },
]}
/>
</Field>
<Field label="Postcode">
<TextInput />
</Field>
</Stack>
</Fieldset>
Example
Legend
Provide a caption that describes the set of form fields.
<Fieldset legend="Name">
<Columns gap="small">
<Field label="First" labelVisibility="hidden">
<TextInput placeholder="e.g. Jane" />
</Field>
<Field label="Last" labelVisibility="hidden">
<TextInput placeholder="e.g. Smith" />
</Field>
</Columns>
</Fieldset>