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.

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

Jag godkänner villkoren

Installation

npm

npm install @midas-ds/components

Yarn

yarn add @midas-ds/components

pnpm

pnpm add @midas-ds/components

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

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ämligt 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

Välj alla

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
inputRef	RefObject<HTMLInputElement>	-	A ref for the HTML input element.
isDisabled	boolean	-	Whether the input is disabled.
id	string	-	The element's unique identifier. See MDN.
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.
name	string	-	The name of the input element, used when submitting an HTML form. See MDN.
value	string	-	The value of the input element, used when submitting an HTML form. See MDN.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isInvalid	boolean	-	Whether the input value is invalid.
isIndeterminate	boolean	-	Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
defaultSelected	boolean	-	Whether the element should be selected (uncontrolled).
isSelected	boolean	-	Whether the element should be selected (controlled).
isRequired	boolean	-	Whether user input is required on the input before form submission.
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.
validationBehavior	"native" | "aria"	'native'	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.
children	ReactNode | ((values: CheckboxRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
className	string | ((values: CheckboxRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: CheckboxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
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

Name	Type	Default	Description
inputRef	RefObject<HTMLInputElement>	-	A ref for the HTML input element.
isDisabled	boolean	-	Whether the input is disabled.
id	string	-	The element's unique identifier. See MDN.
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.
name	string	-	The name of the input element, used when submitting an HTML form. See MDN.
value	string	-	The value of the input element, used when submitting an HTML form. See MDN.
isReadOnly	boolean	-	Whether the input can be selected but not changed by the user.
isInvalid	boolean	-	Whether the input value is invalid.
isIndeterminate	boolean	-	Indeterminism is presentational only. The indeterminate visual representation remains regardless of user interaction.
defaultSelected	boolean	-	Whether the element should be selected (uncontrolled).
isSelected	boolean	-	Whether the element should be selected (controlled).
isRequired	boolean	-	Whether user input is required on the input before form submission.
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.
validationBehavior	"native" | "aria"	'native'	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.
children	ReactNode | ((values: CheckboxRenderProps & { defaultChildren: ReactNode; }) => ReactNode)	-	The children of the component. A function may be provided to alter the children based on component state.
className	string | ((values: CheckboxRenderProps & { defaultClassName: string; }) => string)	-	The CSS className for the element. A function may be provided to compute the class based on component state.
style	CSSProperties | ((values: CheckboxRenderProps & { defaultStyle: CSSProperties; }) => CSSProperties)	-	The inline style for the element. A function may be provided to compute the style based on component state.
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.