Radio
3.1.3
Radio buttons allow the user to select one option from a set.
| 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.radioExamples
Radio with label
List Item with Radio (leading)
List Item with Radio (trailing)
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" />}
/>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>
Importer av Radio
Repos med Radio
Senaste installerade version av Radio
Äldsta installerade version av Radio