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 från @midas-ds/components är en komposit av komponenterna CheckboxField & CheckboxButton. För ökad kontroll, vänligen importera respektive komponent separat.

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
description	string	-
errorMessage	((validation: ValidationResult) => string) | string	-
errorPosition	"bottom" | "top"	top
className	ClassNameOrFunction<CheckboxFieldRenderProps>	'react-aria-CheckboxField'	The CSS className for the element. A function may be provided to compute the class based on component state.
inputRef	Ref<HTMLInputElement | null>	-	A ref for the HTML input element.
isDisabled	boolean	-	Whether the input is disabled.
autoFocus	boolean	-	Whether the element should receive focus on render.
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.
isRequired	boolean	-	Whether user input is required on the input before form submission.
validate	((value: boolean) => true | ValidationError | null)	-	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.
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).
validationBehavior	"aria" | "native"	'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	ChildrenOrFunction<CheckboxFieldRenderProps>	-	The children of the component. A function may be provided to alter the children based on component state.
style	StyleOrFunction<CheckboxFieldRenderProps>	-	The inline style for the element. A function may be provided to compute the style based on component state.
render	DOMRenderFunction<"div", CheckboxFieldRenderProps>	-	Overrides the default DOM element with a custom render function. This allows rendering existing components with built-in styles and behaviors such as router links, animation libraries, and pre-styled components. Requirements: You must render the expected element type (e.g. if <button> is expected, you cannot render an <a>). Only a single root DOM element can be rendered (no fragments). You must pass through props and ref to the underlying DOM element, merging with your own prop as appropriate.
slot	string | null	-	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