Switch

Use defaultChecked for uncontrolled state or checked with onCheckedChange for controlled state. The actual input uses role="switch". children renders a visible label; use inputProps for aria-label or aria-labelledby when the label lives elsewhere.

import { Switch } from '@manti-ui/react';

export default function SwitchBasic() {
  return (
    <>
      <Switch defaultChecked>Wi-Fi</Switch>
      <Switch>Bluetooth</Switch>
      <Switch disabled>Airplane mode</Switch>
    </>
  );
}

Sizes

SmallMedium

API

Prop	Type	Default	Description
`size`	`'sm' \| 'md'`	`'md'`	Control size.
`checked`	`boolean`	—	Controlled checked state.
`defaultChecked`	`boolean`	—	Initial checked state when uncontrolled.
`onCheckedChange`	`(checked: boolean) => void`	—	Called whenever the checked state changes.
`children`	`ReactNode`	—	Optional trailing label.
`disabled`	`boolean`	—	Disable the control.
`name / value`	`string`	—	Form field name and submitted value when checked.
`rootProps / inputProps`	`LabelHTMLAttributes / InputHTMLAttributes`	—	Props for the wrapping label and actual role=switch input.

Styling

Anatomy

Part	Selector	Description
`root`	`[data-scope="switch"][data-part="root"]`	The <label> wrapping the control.
`control`	`[data-scope="switch"][data-part="control"]`	The track.
`thumb`	`[data-scope="switch"][data-part="thumb"]`	The sliding knob.
`hidden-input`	`[data-scope="switch"][data-part="hidden-input"]`	Visually hidden checkbox input.
`label`	`[data-scope="switch"][data-part="label"]`	Optional trailing label text.

Tokens

Token	Controls
`--manti-switch-track-width`	track width
`--manti-switch-track-height`	track height
`--manti-switch-track-padding`	track padding

Last updated 13 September 2026