Checkbox

Kryssruta

Version: 1.0.3

Versionslogg

Storybook

Referens

Kryssrutor används för att låta användaren välja inget, ett eller flera alternativ. Om det är många alternativ så bör MultiSelect användas istället.

Installation och användning

npm

npm install @midas-ds/checkbox

Yarn

yarn add @midas-ds/checkbox

pnpm

pnpm add @midas-ds/checkbox

import { Checkbox } from '@midas-ds/checkbox'
;<Checkbox>Jag godkänner villkoren</Checkbox>

Gruppera flera checkboxar

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

Etikett och beskrivning

Etikett för enskild checkbox sätts i template via <Checkbox>Etikett</Checkbox>. <CheckboxGroup> har en label och en desciption för ytterligare förklarande text.

Disabled

När en kryssruta inte är tillämplig i den aktuella situationen ska kryssruta och fältetikett tonas ned via attributet isDisabled men inte tas bort.

Validering

Används prop isInvalid och implementera lämplig logik för att hantera fel och felmeddelanden. Se React Aria för ytterligare referens.

Readonly och defaultSelected

Sätt prop isReadonly när användaren inte ska kunna påverka checkboxens tillstånd. defaultSelected sätter checkboxen i ett valt läge.

Välj alla

Ibland kan det vara lämligt att inkludera en checkbox för att "Välja alla". Denna funktion finns inbyggt i <CheckboxGroup /> via egenskapen: showSelectAll

Beroenden

• @midas-ds/theme@^0.5.23

• react@^18.2.0

Riktlinjer

Val av komponent

• Använd inte kryssruta om användaren väntar sig att valet ska få effekt direkt

• Om flera kryssrutor är placerade under varandra, kan det ibland vara lämpligt att användaren kan markera alla kryssrutor genom att klicka i det översta alternativet, ”Alla”, som är placerat direkt ovanför de ordinarie kryssrutorna. Rutan ska vara avmarkerad tills användaren klickar i den och då ska alla följande rutor och eventuella subrutor markeras. Om användaren väljer att avmarkera en post så ska kryssrutan avmarkeras.

• Om ”Markera alla”-kryssruta används på en sida med paginerat innehåll så skall endast de kryssrutor som finns på den aktuella sidan väljas.

• Fältetikett ska inledas med en stor bokstav och inte följas av punkt.

API

Checkbox

Namn	Typ	Standard	Beskrivning
inputRef	RefObject<HTMLInputElement>	-	A ref for the HTML input element.
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).
isDisabled	boolean	-	Whether the input is disabled.
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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).
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.
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	"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

Namn	Typ	Standard	Beskrivning
inputRef	RefObject<HTMLInputElement>	-	A ref for the HTML input element.
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).
isDisabled	boolean	-	Whether the input is disabled.
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](https://developer.mozilla.org/en-US/docs/Web/HTML/Global_attributes/id).
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).
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.
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	"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.

Beroenden

• @midas-ds/theme@^0.5.23

• react@^18.2.0