Komponenter
Checkbox
Checkbox gir brukerne mulighet til å velge ett eller flere alternativer. Den kan også brukes i tilfeller der brukeren skal bekrefte noe.
HTML
Unable to parse html
const Preview = () => { return ( <Checkbox label='Checkbox label' description='Description' value='value' /> ); }; render(<Preview />)
Bruk
Bruk klassenavnet ds-input på <input> sammen med type="checkbox".
For et gyldig skjemaelement anbefaler vi å bruke <ds-field> sammen med en <label>.
CSS variablar og data-attributter
Størrelser styres med data-size og farger med data-color. Komponenten vil arve nærmeste forelder med disse satt.
Checkbox er ds-input med type="checkbox" så variabler og data-attributter som gjelder for input gjelder også for checkbox.
| Navn | Verdi |
|---|---|
| data-width | auto |
| Navn | Verdi |
|---|---|
| --dsc-input-padding-block | var(--ds-size-2) |
| --dsc-input-padding-inline | var(--ds-size-3) |
| --dsc-input-padding | var(--dsc-input-padding-block) var(--dsc-input-padding-inline) |
| --dsc-input-size--toggle | var(--ds-size-6) |
| --dsc-input-size | var(--ds-size-12) |
| --dsc-input-background--readonly | var(--ds-color-neutral-surface-tinted) |
| --dsc-input-background | var(--ds-color-neutral-surface-default) |
| --dsc-input-border-color--readonly | var(--ds-color-neutral-border-subtle) |
| --dsc-input-border-color | var(--ds-color-neutral-border-default) |
| --dsc-input-border-style | solid |
| --dsc-input-border-width--toggle | max(var(--ds-border-width-default),calc(var(--ds-size-1)/2)) |
| --dsc-input-border-width | var(--ds-border-width-default) |
| --dsc-input-outline-color--hover | var(--ds-color-neutral-border-default) |
| --dsc-input-outline-color--toggle--hover | var(--dsc-input-accent-color) |
| --dsc-input-outline-width--hover | var(--ds-border-width-default) |
| --dsc-input-outline-style--hover | solid |
| --dsc-input-color--readonly | var(--ds-color-neutral-text-default) |
| --dsc-input-color | var(--ds-color-neutral-text-default) |
| --dsc-input-stroke-color | var(--ds-color-base-contrast-default) |
| --dsc-input-stroke-color--invalid | var(--ds-color-danger-base-contrast-default) |
| --dsc-input-stroke-width | 0.05em |
| --dsc-input-accent-color | var(--ds-color-base-default) |
| --dsc-input-accent-color--invalid | var(--ds-color-danger-text-subtle) |
| --dsc-input-line-height | var(--ds-line-height-md) |
Eksempler
Gruppering
Bruk fieldset for gruppering av flere valg.
HTML
Unable to parse html
const Group = () => { const { getCheckboxProps } = useCheckboxGroup({ value: ['epost'], }); return ( <Fieldset> <Fieldset.Legend> Hvordan vil du helst at vi skal kontakte deg? </Fieldset.Legend> <Fieldset.Description> Velg alle alternativene som er relevante for deg. </Fieldset.Description> <Checkbox label='E-post' {...getCheckboxProps('epost')} /> <Checkbox label='Telefon' {...getCheckboxProps('telefon')} /> <Checkbox label='SMS' {...getCheckboxProps('sms')} /> </Fieldset> ); }; render(<Group />)
Outline
data-variant="outline" legger på ekstra padding og en ramme rundt valget slik at det blir en større klikkflate.
HTML
Unable to parse html
const Outline = () => { const { getCheckboxProps } = useCheckboxGroup({ value: ['drift'], variant: 'outline', }); return ( <Fieldset> <Fieldset.Legend>Hvilke varsler vil du motta?</Fieldset.Legend> <Fieldset.Description> Velg hvilke typer varsler som er relevante for deg. </Fieldset.Description> <Checkbox label='Driftsmeldinger' description='Varsler ved planlagt vedlikehold og driftsavvik.' {...getCheckboxProps('drift')} /> <Checkbox label='Påminnelser' description='Varsler om frister og oppgaver som krever handling.' {...getCheckboxProps('paminnelse')} /> </Fieldset> ); }; render(<Outline />)
Readonly
type="checkbox" er alltid :read-only, og har ikke støtte for dette på samme måte som input-typer du kan skrive i.
Dersom du setter readonly på checkbox sørger vi for at den oppfører seg som om den kun har lesetilgang, ved å stoppe onClick og onChange.
Brukeren vil fortsatt kunne fokusere på elementet.
HTML
Unable to parse html
const ReadOnly = () => ( <Checkbox label='Checkbox label' description='Description' value='value' readOnly /> ); render(<ReadOnly />)
React
I React er det enklere å bygge opp en checkbox, da vi har en ferdig komponent som tar seg av det meste av logikken og tilstandshåndteringen for oss.
Checkbox er ein samansatt komponent som bruker field, label, validation message og input for å lage ein checkbox.
I tillegg har vi en egen useCheckboxGroup React-hook for å lettere håndtere en gruppe av Checkbox-komponenter.
- disabled
- Description
Disables element @note Avoid using if possible for accessibility purposes
- Type
boolean
- readOnly
- Description
Toggle `readOnly`
- Type
boolean
- data-indeterminate
- Description
Indeterminate state for checkbox inputs Only works when used inside `Field` component
- Type
boolean- Default
false
- aria-label
- Description
Optional aria-label
- Type
string
- label
- Description
Checkbox label
- Type
ReactNode
- description
- Description
Description for field
- Type
ReactNode
- value
- Description
Value of the `input` element
- Type
string | number | readonly string[]
- error
- Description
Error message for field
- Type
ReactNode
- variant
- Description
If outline, the checkbox will have a border.
- Type
"outline"
- aria-labelledby
- Type
string
| Name | Type | Default | Description |
|---|---|---|---|
| disabled | boolean | - | Disables element @note Avoid using if possible for accessibility purposes |
| readOnly | boolean | - | Toggle `readOnly` |
| data-indeterminate | boolean | false | Indeterminate state for checkbox inputs Only works when used inside `Field` component |
| aria-label | string | - | Optional aria-label |
| label | ReactNode | - | Checkbox label |
| description | ReactNode | - | Description for field |
| value | string | number | readonly string[] | - | Value of the `input` element |
| error | ReactNode | - | Error message for field |
| variant | "outline" | - | If outline, the checkbox will have a border. |
| aria-labelledby | string | - | - |
Indeterminate checkbox
Bruk useCheckboxGroup for å lage en overordnet checkbox som kan velge eller fjerne alle alternativer i gruppen.
Dette aktiverer en ekstra tilstand, indeterminate, ved siden av checked og unchecked. Den vises med en horisontal strek når én eller flere checkbox er markert i gruppen. Den vises som en vanlig checkbox dersom alle i gruppen har samme tilstand.
Dette aktiveres ved å sette allowIndeterminate: true i getCheckboxProps.
React
Unable to parse html
const InTable = () => { const tableData = [ { id: 1, navn: 'Lise Nordmann', epost: 'lise@nordmann.no', telefon: '68051156', }, { id: 2, navn: 'Kari Nordmann', epost: 'kari@nordmann.no', telefon: '68059679', }, { id: 3, navn: 'Ola Nordmann', epost: 'ola@nordmann.no', telefon: '68055731', }, { id: 4, navn: 'Per Nordmann', epost: 'per@nordmann.no', telefon: '68059631', }, ]; const { getCheckboxProps } = useCheckboxGroup({ name: 'checkbox-table', value: ['2', '3'], }); return ( <Table> <colgroup> {/* ensure the first column only takes up the necessary space */} <col style={{ width: '1px' }} /> <col /> <col /> </colgroup> <Table.Head> <Table.Row> <Table.HeaderCell> <Checkbox aria-label='Velg alle' {...getCheckboxProps({ allowIndeterminate: true, value: 'all', })} /> </Table.HeaderCell> <Table.HeaderCell>Navn</Table.HeaderCell> <Table.HeaderCell>E-post</Table.HeaderCell> </Table.Row> </Table.Head> <Table.Body> {tableData.map((person) => ( <Table.Row key={person.id}> <Table.Cell> <Checkbox aria-labelledby={`checkbox-${person.id}-name`} {...getCheckboxProps(person.id.toString())} /> </Table.Cell> <Table.Cell id={`checkbox-${person.id}-name`}> {person.navn} </Table.Cell> <Table.Cell>{person.epost}</Table.Cell> </Table.Row> ))} </Table.Body> </Table> ); }; render(<InTable />)