Switch Preview

A switch lets someone choose between two mutually exclusive options, like on or off. Activating a switch triggers an immediate change.

If you need a component that requires a submission step before applying a change, or if you need to specify an indeterminate state, try a checkbox.

Loading...
Open in CodeSandbox
Switch storybook
React guidance
Switch pattern
WAI guidance

Properties

as

“input”
Default:
none

checked

Defines the controlled checked state of the Switch. If passed, Switch ignores the defaultChecked property. This should only be used if the checked state is to be controlled at a higher level and there is a plan to pass the correct value based on handling onChange events and re-rendering.

boolean
Default:
false

defaultChecked

Defines whether the Switch is initially in a checked state or not when rendered.

boolean
Default:
false

indicator

The track and the thumb sliding over it indicating the on and off status of the Switch.

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none

input

Hidden input that handles the Switch’s functionality.

This is the PRIMARY slot: all native properties specified directly on the <Switch> tag will be applied to this slot, except className and style , which remain on the root slot.

({ as?: "input"; } & Omit<Pick<DetailedHTMLProps<InputHTMLAttributes<HTMLInputElement>, HTMLInputElement>, "key" | keyof InputHTMLAttributes<...>> & { ...; }, "children"> & { ...; })
Default:
none

label

The Switch’s label.

WithSlotShorthandValue<WithSlotRenderFunction<Omit<ComponentProps<LabelSlots, "root">, "required"> & { disabled?: boolean; required?: boolean | WithSlotShorthandValue<{ as?: "span"; } & Pick<...> & { ...; } & { ...; }> | null | undefined; size?: "small" | ... 2 more ... | undefined; weight?: ...
Default:
none

labelPosition

The position of the label relative to the Switch.

“before” “after” “above”
Default:
“after”

onChange

Callback to be called when the checked state value changes.

((ev: ChangeEvent<HTMLInputElement>, data: SwitchOnChangeData) => void)
Default:
none

root

The root element of the Switch.

The root slot receives the className and style specified directly on the <Switch> tag. All other native props will be applied to the primary slot: input .

WithSlotShorthandValue<{ as?: "div"; } & Pick<DetailedHTMLProps<HTMLAttributes<HTMLDivElement>, HTMLDivElement>, "key" | keyof HTMLAttributes<...>> & { ...; } & { ...; }>
Default:
none