Checkbox@navikt/ds-react

betaOppdatert 30. mai 2022

aksel.nav.no

Controlled state

  const [state, setState] = useState(["checkbox1"]);
  
  return (
    <CheckboxGroup
      legend="My CheckboxGroup"
      value={state}
      onChange={(v) => setState(v)}
    >
      <Checkbox value="checkbox1">1</Checkbox>
      <Checkbox value="checkbox2">2</Checkbox>
      <Checkbox value="checkbox3">3</Checkbox>
    </CheckboxGroup>
  );

Props

Checkbox

error
Type	`boolean`
Description	Adds error indication on checkbox
Default	`false`

Required
children
Type	`ReactNode`
Description	Checkbox label

hideLabel
Type	`boolean`
Description	Hides label and makes it viewable for screen-readers only.

value
Type	`any`
Description	The value of the HTML element.

indeterminate
Type	`boolean`
Description	Specify whether the Checkbox is in an indeterminate state
Default	`false`

description
Type	`string`
Description	Adds a description to extend labling of Checkbox

size
Type	`"medium" \| "small"`
Description	Changes font-size, padding and gaps

disabled
Type	`boolean`
Description	Disables element @note Avoid using if possible for accessibility purposes

id
Type	`string`
Description	Override internal id

className
Type	`string`

ref
Type	`Ref<HTMLInputElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

CheckboxGroup

Required
children
Type	`ReactNode`
Description	Collection of <Checkbox/>

value
Type	`any[]`
Description	Controlled state for checkboxes.

defaultValue
Type	`any[]`
Description	Default checked checkboxes on render

onChange
Type	`((value: any[]) => void)`
Description	Returns current checked checkboxes in group
Default	`() => {}`

Required
legend
Type	`ReactNode`
Description	Fieldset legend

hideLegend
Type	`boolean`
Description	If enabled shows the legend and description for screenreaders only

error
Type	`ReactNode`
Description	Error message for element

errorId
Type	`string`
Description	Override internal errorId

size
Type	`"medium" \| "small"`
Description	Changes font-size, padding and gaps

disabled
Type	`boolean`
Description	Disables element @note Avoid using if possible for accessibility purposes

description
Type	`ReactNode`
Description	Adds a description to extend labling of a field

id
Type	`string`
Description	Override internal id

className
Type	`string`

ref
Type	`Ref<HTMLFieldSetElement>`

* Props er autogenerert fra kode, så avvik kan forekomme. Ta kontakt hvis noe ikke stemmer!

Checkbox@navikt/ds-react

Installasjon

Controlled state

Props

Var denne artikkelen til hjelp?