Checkbox

Kryssruta

Storybook

React Aria

Inmatningsfält för att låta användaren välja inget, ett eller flera av ett antal förvalda alternativ.

import { Checkbox } from '@midas-ds/components'

<Checkbox>Jag godkänner villkoren</Checkbox>

Jag godkänner villkoren

Varianter

Ensam checkbox

<Checkbox>Jag godkänner villkoren</Checkbox>

Jag godkänner villkoren

Förvalt alternativ (okontrollerat)

Använd attributet defaultSelected för att en checkbox ska vara förvald.

<Checkbox defaultSelected />

Kontrollerat val

Använd attributet isSelected och eventet onChange för att använda controlled mode på Checkbox.

import React from 'react'

const [isSelected, setIsSelected] = React.useState(false)

return (
  <Checkbox
    isSelected={isSelected}
    onChange={setIsSelected}
  >
    Jag godkänner villkoren
  </Checkbox>
)

Jag godkänner villkoren

Du har inte godkänt villkoren

Varianter för flera checkboxar

Använd <CheckboxGroup> för att gruppera flera checkboxar som hör samman.

<CheckboxGroup
  label='Godkänner du våra villkor?'
  description='Läs texten först'
>
  <Checkbox value='1'>Jag har läst texten</Checkbox>
  <Checkbox value='2'>Jag godkänner villkoren</Checkbox>
</CheckboxGroup>

Godkänner du våra villkor?Läs texten först

Jag har läst texten

Jag godkänner villkoren

Välj alla

Ibland kan det vara lämpligt att ge användaren möjlighet att snabbt kryssa i alla kryssrutor. Denna funktion finns inbyggt i <CheckboxGroup> via egenskapen showSelectAll. Om detta används på en sida med paginerat innehåll så skall endast de kryssrutor som finns på den aktuella sidan väljas.

<CheckboxGroup
  label='Godkänner du våra villkor'
  description='Läs texten först'
  showSelectAll
>
  <Checkbox value='1'>Jag har läst texten</Checkbox>
  <Checkbox value='2'>Jag godkänner villkoren</Checkbox>
</CheckboxGroup>

Godkänner du våra villkorLäs texten först

Select all

Jag har läst texten

Jag godkänner villkoren

Förvalda alternativ (okontrollerat)

Använd attributet defaultValue för att en eller flera kryssrutor ska vara förvalda.

<CheckboxGroup
  label='Favoritfrukt'
  defaultValue={['banan', 'melon']}
>
  <Checkbox value='banan'>Banan</Checkbox>
  <Checkbox value='melon'>Melon</Checkbox>
  <Checkbox value='kiwi'>Kiwi</Checkbox>
  <Checkbox value='satsumas'>Satsumas</Checkbox>
</CheckboxGroup>

Favoritfrukt

Banan

Melon

Kiwi

Satsumas

Kontrollerat val

Använd attributet value och eventet onChange för att använda controlled mode på CheckboxGroup.

import React from 'react'

const [value, setValue] = React.useState<string[]>()

return (
  <CheckboxGroup
    label='Favoritfrukt'
    value={value}
    onChange={setValue}
  >
    <Checkbox value='banan'>Banan</Checkbox>
    <Checkbox value='melon'>Melon</Checkbox>
    <Checkbox value='kiwi'>Kiwi</Checkbox>
    <Checkbox value='satsumas'>Satsumas</Checkbox>
  </CheckboxGroup>
)

Favoritfrukt

Banan

Melon

Kiwi

Satsumas

Valda alternativ: 

Riktlinjer

• Om det är många alternativ så bör Select användas istället.
• Använd inte kryssruta om användaren väntar sig att valet ska få effekt direkt
• Fältetikett ska inledas med en stor bokstav och inte följas av punkt.

API

Checkbox

Name	Type	Default	Description
isIndeterminate	boolean	-	Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
children	ReactNode	-	The label for the element.
value	string	-	The value of the input element, used when submitting an HTML form. See MDN.
defaultSelected	boolean	-	Whether the element should be selected (uncontrolled).
isSelected	boolean	-	Whether the element should be selected (controlled).
isDisabled	boolean	-	Whether the input is disabled.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isRequired	boolean	-	Whether user input is required on the input before form submission.
isInvalid	boolean	-	Whether the input value is invalid.
validationState	ValidationState	-	@deprecated Use isInvalid instead.
validationBehavior	"aria" | "native"	'aria'	Whether to use native HTML form validation to prevent form submission when the value is missing or invalid, or mark the field as required or invalid via ARIA.
validate	(value: boolean) => true | ValidationError	-	A function that returns an error message if a given value is invalid. Validation errors are displayed to the user when the form is submitted if validationBehavior="native". For realtime validation, use the isInvalid prop instead.
autoFocus	boolean	-	Whether the element should receive focus on render.
slot	string	-	A slot name for the component. Slots allow the component to receive props from a parent component. An explicit null value indicates that the local props completely override all props received from a parent.
className	string	-

CheckboxGroup