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.
excludeFromTabOrder	boolean	-	Whether to exclude the element from the sequential tab order. If true, the element will not be focusable via the keyboard by tabbing. This should be avoided except in rare scenarios where an alternative means of accessing the element or its functionality via the keyboard is available.
id	string	-	The element's unique identifier. See MDN.
name	string	-	The name of the input element, used when submitting an HTML form. See MDN.
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.

CheckboxGroup