Checkbox
3.1.7
Checkboxes can be used to turn an option on or off.
| 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. |
npm install @sj-ab/component-library.ui.checkboxExamples
Checkbox with label
List Item with Checkbox (leading)
List Item with Checkbox (trailing)
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.
<FormControlLabel
control={<Checkbox name="fruit" value="apple" />}
label={<ListItemText padding primary="Äpple" />}
/>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:
<RadioGroup role="group" aria-labelledby="fruit-heading">
<Typography variant="h3" id="fruit-heading">Vilka är dina favoritfrukter?</Typography>
<FormControlLabel
control={<Checkbox name="fruit" value="apple" />}
label={<ListItemText padding primary="Äpple" />}
/>
<FormControlLabel
control={<Checkbox name="fruit" value="banana" />}
label={<ListItemText padding primary="Banan" />}
/>
<FormControlLabel
control={<Checkbox name="fruit" value="pear" />}
label={<ListItemText padding primary="Päron" />}
/>
</RadioGroup>
Importer av Checkbox
Repos med Checkbox
Senaste installerade version av Checkbox
Äldsta installerade version av Checkbox