Radio

3.1.7

Radio buttons allow the user to select one option from a set.

Demo

Props

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

customAttribute

{ attribute: string; value: string | number }Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]".

isLoading

booleanIf true, a loading skeleton will be rendered instead of the component.

Installation

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

Länkar

Best practices

Tillgänglighet

Semantik

Radio presenteras som en helt vanlig HTML <input type="radio">.

Textetiketter

Använd komponenten FormControlLabel för att koppla ihop Radio 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={<Radio name="fruit" value="apple" />}
    label={<ListItemText padding primary="Äpple" />}
/>

Läs mer om FormControlLabel hos MaterialUI

Hantering av logik och tangentbordsstyrning

Använd komponenten RadioGroup för att att hantera logiken för en grupp av radioknappar. Då får du automatiskt bra stöd för tangentbord och skärmläsare.

<RadioGroup onChange={handleChange} role="group" value={state}>
  <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>

Gruppera formulärsobjekt

Grupper med relaterade radioknappar 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 som sätts på komponenten RadioGroup:

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

    72

  • Repos med Radio

    55%

  • Senaste installerade version av Radio

    3.1.3

  • Äldsta installerade version av Radio

    3.0.14