Hoppa till huvudinnehåll

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.

Installation​

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

Varianter​

Ensam checkbox​

Flera checkboxar​

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

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.

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​

NamnTypStandardBeskrivning
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
value string-The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
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).
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.
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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​

NamnTypStandardBeskrivning
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefname).
value string-The value of the input element, used when submitting an HTML form. See [MDN](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input#htmlattrdefvalue).
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).
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.
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](https://developer.mozilla.org/en-US/docs/Web/API/Element/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](https://developer.mozilla.org/en-US/docs/Web/API/HTMLElement/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.