Checkbox

4.0.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.

<FormControlLabel
    control={<Checkbox name="fruit" value="apple" />}
    label={<ListItemText padding primary="Äpple" />}
/>

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:

<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>

Change log

Statistik

Importer av Checkbox

Repos med Checkbox

50%

Senaste installerade version av Checkbox

6.1.1

Äldsta installerade version av Checkbox