Skip to content

Switch

A control that allows the user to toggle between checked and not checked.

Installation

npm i @huin-core/react-switch

API Reference

Switch

PropTypeDescription
asChildbooleanWhen set to true, renders the component as its child element, inheriting the child's styles and behavior.
defaultCheckedbooleanThe state of the switch when it is initially rendered. Use when you do not need to control its state.
checkedbooleanRepresents the current state of the component, indicating whether it is enabled or selected.
onCheckedChangefunctionEvent handler called when the checked state changes.
disabledbooleanWhen set to true, disables the component, preventing user interaction or triggering of associated actions.
namestringThe name of the piece.
requiredbooleanWhen true, indicates that the user must check the switch before the owning form can be submitted.
valuestringRepresents the current value or state of the component, which can be used to bind or track its data over time.

SwitchThumb

PropTypeDescription
asChildbooleanWhen set to true, renders the component as its child element, inheriting the child's styles and behavior.

Keyboard Interactions

KeyDescription
Space
Enter
Turns the switch on or off.