ToggleSwitch
ToggleSwitch er et binært vippebryter-element for innstillinger som skal tre i kraft umiddelbart. Forskjellen fra en checkbox er viktig: en checkbox er en del av et skjema som sendes inn, mens ToggleSwitch utløser en umiddelbar handling. Bruk ToggleSwitch for innstillinger som «Slå på varsler», og checkbox for «Godta vilkårene».
Viktig informasjon
Bruk Checkbox i stedet hvis valget ikke trer i kraft umiddelbart — ToggleSwitch impliserer øyeblikkelig effekt.
Props
Prop | Type | Påkrevd | Standard | Beskrivelse |
|---|---|---|---|---|
childrenReact | React.ReactNode | Ja | — | Label-teksten. Beskriv tilstanden som er på, f.eks. «Mørkt tema» eller «Varsler aktivert». |
checkedNative HTML | boolean | Nei | — | Kontrollert av/på-tilstand. |
defaultCheckedNative HTML | boolean | Nei | false | Initiell tilstand for ukontrollert bruk. |
onChangeReact | React.ChangeEventHandler<HTMLInputElement> | Nei | — | Kalles umiddelbart når brukeren veksler bryteren. Utfør handlingen direkte her. |
disabledNative HTML | boolean | Nei | false | Deaktiverer bryteren. Forklar alltid for brukeren hvorfor den er deaktivert. |
classNameReact | string | Nei | — | Egendefinerte CSS-klasser. |
Eksempler
Grunnleggende bruk
Et ukontrollert eksempel. I produksjon vil du typisk bruke checked + onChange fra React-state.
Gruppe av innstillinger
Grupper relaterte bryterinnstillinger i en Flex-kolonne med konsistent gap.