useSwitch

Provides the behavior and accessibility implementation for a switch component. A switch is similar to a checkbox, but represents on/off values as opposed to selection.

Low power mode

Example

Switch.tsx

Switch.css

Example

Switch.tsx

Switch.css

import {Switch} from './Switch';

<Switch>Low power mode</Switch>

API

<SwitchField>
  <SwitchButton>Label</SwitchButton>
  <Text slot="description" />
  <FieldError />
</SwitchField>

useToggleState(props: ToggleStateOptions): ToggleState

useSwitch(
  props: AriaSwitchProps,
state: ToggleState,
ref: RefObject<HTMLInputElement | null>
): SwitchAria

ToggleState

Properties

Name	Type
`isSelected`	`boolean`
Whether the toggle is selected.
`defaultSelected`	`boolean`
Whether the toggle is selected by default.

Methods

`setSelected(isSelected: boolean): void`
Updates selection state.
`toggle(): void`
Toggle the selection state.

AriaSwitchProps

Name	Type
`children`	`ReactNode`
The label for the element.
`defaultSelected`	`boolean`
Whether the element should be selected (uncontrolled).
`isSelected`	`boolean`
Whether the element should be selected (controlled).
`isDisabled`	`boolean`
Whether the input is disabled.
`isReadOnly`	`boolean`
Whether the input can be selected but not changed by the user.

`onChange`	`(isSelected: boolean) => void`
Handler that is called when the element's selection state changes.

SwitchAria

Name	Type
`labelProps`	`LabelHTMLAttributes<HTMLLabelElement>`
Props for the label wrapper element.
`inputProps`	`InputHTMLAttributes<HTMLInputElement>`
Props for the input element.
`descriptionProps`	`<HTMLElement>`
Props for the switch description element, if any.
`errorMessageProps`	`DOMAttributesWithRef<HTMLElement>`
Props for the switch error message element, if any.
`isSelected`	`boolean`
Whether the switch is selected.
`isPressed`	`boolean`
Whether the switch is in a pressed state.
`isDisabled`	`boolean`
Whether the switch is disabled.
`isReadOnly`	`boolean`
Whether the switch is read only.
`validationDetails`	`ValidityState`
The native validation details for the input.