Switch
3.1.6
Switches toggle the state of a single item on or off.
| Namn | Typ | Beskrivning |
|---|---|---|
checked | boolean | If true, the component is checked. |
className | string | Optional CSS class name. |
customAttribute | { attribute: string; value: string |
number } | Used for testing. Clickable and requested subcomponents will be suffixed with "-[ComponentName]". |
disabled | boolean | If true, the component is disabled. |
inputProps | InputHTMLAttributes | Additional input properties to be applied to the switch element. |
isInCard | boolean | If true, removes focus styling when the switch is part of a SwitchCard. |
listOffset | boolean | Adjusts the list offset for the switch component. |
name * | string | The name attribute of the switch. Used to distinguish elements when a form changes. |
onChange | (event: ChangeEvent, checked: boolean) => void | Callback fired when the switch is clicked. |
npm install @sj-ab/component-library.ui.switchVisuell design
När en Switch aktiveras blir den grön, dess reglage flyttas till höger och vi visar en kryssikon i det gröna fältet. Alla dessa tre indikatorer behövs för att ovana användare inte ska missförstå komponentens status.
Switch i inaktivt läge.
Switch i aktivt (kryssat) läge.
Klickyta
Switch har en inbyggd minsta klickyta på 68px x 44px som aldrig får underskridas. Denna yta behövs för att reglaget ska vara enkelt att träffa med fingret för användare med nedsatt motorik.
Switch med sin minska klickyta.
Semantik
Switch presenteras för hjälpmedel som en vanlig HTML-kryssruta, det vill säga <input type="checkbox">. Den kan antingen vara kryssad eller inte kryssad.
Textetikett
Switch ska alltid kombineras med en synlig text så att användaren förstår vad det är som reglaget slår av eller på.
Texten ska vara kodad i ett <label>-element så dess namn även framgår för skärmläsare. Använd komponenten <FormControlLabel> för detta.
<FormControlLabel
control={<Switch defaultChecked name="checkedA" />}
label="Switch 1"
/>- Enter eller MellanslagVäxla Switch på eller av
Importer av Switch
Repos med Switch
Senaste installerade version av Switch
Äldsta installerade version av Switch