Komponenter
Fieldset
Fieldset brukes til å gruppere og navngi felt som naturlig hører sammen, for eksempel datofelt eller adressefelt. Komponenten hjelper med å organisere informasjon, gjøre skjemaer mer oversiktlige og forbedre tilgjengeligheten for skjermlesere.
Det er vanlig å bli forvirret mellom Fieldset og Field.
En god huskeregel er at Fieldset er et sett med Field
React
Unable to parse html
const Preview = () => { return ( <Fieldset> <Fieldset.Legend>Hvilken fjordarm bor du ved?</Fieldset.Legend> <Fieldset.Description> Valget vil hjelpe oss å forbedre innholdet vi viser deg. </Fieldset.Description> <Radio label='Barsnesfjorden' name='radio' value='barsnesfjorden' /> <Radio label='Eidsfjorden' name='radio' value='eidsfjorden' /> <Radio label='Ingen av de' name='radio' value='ingen-av-de' /> </Fieldset> ); }; render(<Preview />)
- variant
- Description
Adjusts styling for paragraph length
- Type
"long" | "default" | "short"- Default
'default'
- asChild
- Description
Change the default rendered element for the one passed as a child, merging their props and behavior.
- Type
boolean- Default
false
| Name | Type | Default | Description |
|---|---|---|---|
| variant | "long" | "default" | "short" | 'default' | Adjusts styling for paragraph length |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |
Bruk
Eksempel
Med checkbox
Både Checkbox og Radio bør grupperes i et Fieldset, selv om det kun er ett element i gruppen.
React
Unable to parse html
const WithCheckbox = () => { return ( <Fieldset> <Fieldset.Legend>Godtar du vilkårene?</Fieldset.Legend> <Checkbox label='Ja, jeg godtar' value='agree' /> </Fieldset> ); }; render(<WithCheckbox />)
Flere felter
React
Unable to parse html
const WithFields = () => { return ( <Fieldset> <Fieldset.Legend>Personopplysninger</Fieldset.Legend> <Fieldset.Description> Fyll inn dine personopplysninger nedenfor. </Fieldset.Description> <Field> <Label>Fornavn</Label> <Input /> </Field> <Field> <Label>Kjønn</Label> <Select> <Select.Option value='male'>Mann</Select.Option> <Select.Option value='female'>Kvinne</Select.Option> <Select.Option value='other'>Annet</Select.Option> </Select> </Field> </Fieldset> ); }; render(<WithFields />)
Legend som heading
Dersom det er en side som kun har skjema på seg, og tittel på siden (<h1>) er samme som vil være i <legend>, kan du legge <h1> inni Fieldset.Legend.
React
Unable to parse html
const LegendAsHeading = () => { return ( <Fieldset> <Fieldset.Legend> <h1>Hvor skal du reise?</h1> </Fieldset.Legend> </Fieldset> ); }; render(<LegendAsHeading />)
HTML
Klassenavnet ds-fieldset legges på <fieldset>-elementet.
CSS variabler og data-attributter
| Navn | Verdi |
|---|---|
| --dsc-fieldset-gap | var(--ds-size-4) |
| Navn | Verdi |
|---|---|
| data-field | description |