Komponenter
Label
Label fungerer som ei tydeleg og tilgjengeleg etikett som fortel brukaren kva eit tilhøyrande skjemaelement handlar om.
Unable to parse html
const Preview = () => { return <Label>Fødselsnummer (11 sifre)</Label>; }; render(<Preview />)
Bruk
Bruk klassenavnet ds-label for å style et HTML <label>-element.
CSS variabler og data-attributter
Størrelsar styrast med data-size og fargar med data-color. Komponenten vil arve næraste forelder med desse satt.
Ingen relevante css-variabler funnet.
Ingen relevante data-attributter funnet.
Eksempel
Vekter
Unable to parse html
const Weights = () => { return ( <div style={{ display: 'grid', gap: 'var(--ds-size-8)' }}> <Field> <Label>Label for text input</Label> <Input type='text' /> </Field> <Field> <Label>Label for checkbox input</Label> <Input type='checkbox' /> </Field> </div> ); }; render(<Weights />)
React
Label
- weight
- Description
Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset @deprecated as field now automatically changes font-weight based on input type
- Type
"regular" | "medium" | "semibold"
- 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 |
|---|---|---|---|
| weight | "regular" | "medium" | "semibold" | - | Adjusts font weight. Use this when you have a label hierarchy, such as checkboxes/radios in a fieldset @deprecated as field now automatically changes font-weight based on input type |
| asChild | boolean | false | Change the default rendered element for the one passed as a child, merging their props and behavior. |