Forms

Switch

An on/off toggle.

Server safeSource

Import

import { Switch } from '@the_viveksingh/vivek-ui'

A setting that applies immediately

Use Switch when the change takes effect at once and Checkbox when it takes effect on submit. It is a real input with role="switch", so it posts in a form.

Two-factor authenticationRequire a one-time code at sign-in.Weekly digestA summary of activity every Monday.Disabled

<Switch
  label="Two-factor authentication"
  description="Require a one-time code at sign-in."
  defaultChecked
/>
<Switch label="Weekly digest" description="A summary of activity every Monday." />
<Switch label="Disabled" disabled />

Label first

Control before label (default)Control after label

<Switch label="Control before label (default)" defaultChecked />
<Switch label="Control after label" labelPosition="start" defaultChecked />

Props

Generated from the package's own type declarations, so this table cannot drift from the code.

Props for Switch
Prop	Type	Default	Description
`label`	`ReactNode`	—	—
`description`	`ReactNode`	—	—
`size`	`'sm' \| 'md'`	—	—
`labelPosition`	`'start' \| 'end'`	—	Put the control after the label instead of before it.

Every remaining prop is spread onto the root element, so all standard HTML and ARIA attributes work. className and style are merged with the library's own, never replaced, and the ref forwards to the root DOM node.

Rendering

Server safe

Switch carries no 'use client' directive and renders directly in a React Server Component. No client JavaScript is shipped for it.