Radio Card
3.2.3
Radio buttons allow the user to select one option from a set.
| Namn | Typ | Beskrivning |
|---|---|---|
active * | boolean | Indicates if the card is currently active. |
activeState | "active" |
"warning" | Defines the border color of the card when it is active. |
boxProps | Partial | Due to a problem when using RadioButtonCard together with toggle button, the box has to |
cardSize | "small" |
"medium" | Specifies a fixed size for the card, overriding responsive breakpoints. |
cardSx | SxProps | |
children | ReactNode | |
customAttribute | { attribute: string; value: string |
number } | Used for tests. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disableContentPadding | boolean | Prop to disable padding on the bottom content. Use this if you need to use the full width |
disableRightComponentPadding | boolean | If true, disables padding in the right component. |
elevation | number | Elevation of the card. |
error | boolean | Indicates if the component is in an error state, applying error-specific styling for validation feedback. |
id * | string | A unique ID for the Radio input. Necessary for WCAG compliance |
limitedClickArea | boolean | If the card should limit the interactive area to the top portion. Needed for accessibility if lower portion contains another interactive element |
onChange | (event: ChangeEvent) => void | Change event handler |
onSizeChange | (size: undefined |
"small" |
"medium") => void | Callback for when the card size changes. Used in RadioPriceCard |
skeletonSx | SxProps | Custom styles for Skeleton. |
value * | string | Value for the Radio input |
wrapRightComponentToBottom | boolean | If the card should wrap the right component to the bottom on very small breakpoints. Used in RadioPriceCard. |
npm install @sj-ab/component-library.ui.radio-cardRadio Card eller Radio Toggle Card?
Vår snarlika komponent Radio Toggle Card har exakt samma utseende som Radio Card men ett helt annat beteende med skärmläsare och tangentbord. Den komponenten får enbart användas när komponenten måste vara en knapp och inte vanlig Radio, till exempel i valet av flexibilitet och reseklass.
Använd alltid Radio Card om du inte har en mycket stark anledning!
Semantik
Radio Card presenteras som en HTML radio. <input> är dolt visuellt och syns enbart för skärmläsare.
<input type="radio" aria-labelledby="radio-card-id-label-container">Tillgängligt namn
Radio Card får automatiskt ett tillgängligt namn för skärmläsare från den synliga texten som sätts med label, labelSecondaryText, labelPrimaryMeta, labelSecondaryMeta, samt eventuellt innehåll i rightComponent.
Allt detta sköts internt inne i komponenten med aria-labelledby under förutsättning att utvecklare skickar in ett unikt id.
Allt innehåll inuti kortets children kopplas till <input> med aria-describedby så att även de läses upp av skärmläsare när radioknappen får fokus.
Hantering av logik och tangentbordsstyrning
Använd komponenten RadioGroup för att att hantera logiken för en grupp av Radio Cards. Då får du automatiskt bra stöd för tangentbord och skärmläsare.
<RadioGroup onChange={handleChange} role="group" value={state}>
<RadioCard id="radio1" value="radio1" {...moreProps} />
<RadioCard id="radio2" value="radio2" {...moreProps} />
<RadioCard id="radio3" value="radio3" {...moreProps} />
</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.
Begränsad klickyta
Som standard är hela kortet klickbart och del av samma klickyta.
Om du vill placera ett annat klickbart objekt inuti RadioCard, till exempel en länk, måste du använda propen limitClickArea. Detta är mycket viktigt för att undvika tillgänglighetsproblem med nästlade interaktiva objekt!
Då kommer enbart den övre delen i kortet vara klickbart. Alla children blir egna fristående element i DOM:en.
200% textförstoring
Radio Card har inbyggt stöd för textförstoring upp till 200% på alla skärmstorlekar. När det blir ont om plats kommer meta-texterna till höger flyttas ner och läggas under.
- Pil-tangenterÄndra valet inom gruppen av radioknappar.
Importer av Radio Card
Repos med Radio Card
Senaste installerade version av Radio Card
Äldsta installerade version av Radio Card