Checkbox

3.4.0

Checkboxes can be used to turn an option on or off.

Demo

Props

Se fullständing dokumentation(öppnas i ny flik)

Namn	Typ	Beskrivning
customAttribute	`{ attribute: string; value: string \| number }`	Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".
isLoading	`boolean`	If true, a loading skeleton will be rendered instead of the component.

Installation

npm install @sj-ab/component-library.ui.checkbox

Länkar

Best practices

Examples

Checkbox with label

List Item with Checkbox (leading)

List Item with Checkbox (trailing)

Tillgänglighet

Semantik

Checkbox presenteras som en helt vanlig HTML <input type="checkbox">.

Textetiketter

Använd komponenten FormControlLabel för att koppla ihop Checkbox med en textetikett. FormControlLabel hanterar automatiskt kopplingen mellan <input> och <label> och ser till att användare med skärmläsare får rätt uppläsning.

Läs mer om FormControlLabel hos MaterialUI

Gruppera formulärsobjekt

Grupper med kryssrutor, radioknappar eller andra formulärsobjekt ska alltid grupperas i koden, så att skärmläsaranvändare förstår att de hänger ihop. Detta kan göras med WAI-ARIA-attributen role="group" och aria-label eller aria-labelledby: