Switch

The Switch component provides a toggle control for binary on/off settings, using role="switch" for proper semantics.

Basic Usage

Dark mode

import { Switch } from "@paramanu/forms-react"

export default function App() {
  return <Switch>Dark mode</Switch>
}

<label class="pm-switch pm-switch--md pm-switch--label-end">
  <input type="checkbox" role="switch" class="pm-switch__input" />
  <span class="pm-switch__track"><span class="pm-switch__thumb"></span></span>
  <span class="pm-switch__label">Dark mode</span>
</label>

Label Placement

Label start

import { Switch } from "@paramanu/forms-react"

export default function App() {
  return <Switch labelPlacement="start">Label start</Switch>
}

<label class="pm-switch pm-switch--md pm-switch--label-start">
  <input type="checkbox" role="switch" class="pm-switch__input" />
  <span class="pm-switch__track"><span class="pm-switch__thumb"></span></span>
  <span class="pm-switch__label">Label start</span>
</label>

Accessibility

Feature	Detail
`role="switch"`	Input uses switch role
`aria-checked`	Reflects checked state
Keyboard	Space toggles the switch

Best Practices

Use switches for immediate binary settings (e.g., enable/disable).
Prefer checkboxes for form submission choices.

Props

Prop	Type	Default	Description
`size`	`"xs" \| "sm" \| "md" \| "lg"`	`"md"`	Switch size
`disabled`	`boolean`	`false`	Disabled state
`checked`	`boolean`	`false`	Checked state
`labelPlacement`	`"start" \| "end"`	`"end"`	Label position

CSS Classes

Class	Description
`pm-switch`	Base class
`pm-switch__input`	Hidden input
`pm-switch__track`	Track element
`pm-switch__thumb`	Thumb element
`pm-switch__label`	Label text
`pm-switch--checked`	Checked state
`pm-switch--label-start`	Label before switch