ComponentsFormSwitch

Switch

6 colors · 3 sizes · icons · label positions · card style

StatesColorsSizesWith iconsLabel positionCard style

Overview

6 colors · 3 sizes · icons · label positions · card style

Default switch

Live preview

Use a switch for a setting that takes effect immediately when it is turned on or off.

App.tsx
tsx
import { Switch } from 'omverse-ui'
 
const [autoSave, setAutoSave] = useState(true)
 
<Switch
label="Auto-save changes"
helperText="Save updates automatically while you work"
checked={autoSave}
onChange={event => setAutoSave(event.target.checked)}
/>

Describe the enabled state with a positive label. Use Checkbox when the choice belongs to a form that is submitted later.

Do not add a separate Save button for a switch unless the entire settings section uses an explicit-save model.

Anatomy

  • Root container and spacing boundary.
  • Primary content and optional secondary metadata.
  • State indicators and utility affordances (icons, badges, controls).
  • Optional helper text, grouping, and behavioral wrappers.

When to use

  • Choose Switch when a repeated, structured interaction is required.
  • Use it for clear, consistent operations across similar surfaces.
  • Use in forms, lists, and action workflows where clarity matters.

When not to use

  • Do not use only for decorative layout without interaction meaning.
  • Avoid duplicating the same behavior without distinct user context.
  • Prefer simpler HTML or textual content for static, non-interactive labels.

Variants

Component variants should be documented by API props and examples below.

States

Common states include idle, active, disabled, focused, and loading/pending states where applicable.

Behavior

Behavior should remain deterministic and keyboard-friendly, with clear visual feedback for every state transition.

Accessibility

  • Use semantic structure and visible labels whenever possible.
  • Preserve keyboard navigation and focus visibility.
  • Announce status and changes when context requires it.

Content guidelines

  • Prefer short, clear labels.
  • Keep content actions scannable and outcome-oriented.
  • Use consistent wording across similar components.

Examples

States

Live preview

Off, on, disabled off, and disabled on

App.tsx
tsx
<Switch label="Off" />
<Switch label="On" defaultChecked />
<Switch label="Disabled off" disabled />
<Switch label="Disabled on" disabled defaultChecked />

Colors

Live preview

Six color variants — default, secondary, success, warning, error, and info

App.tsx
tsx
<Switch label="Default (primary)" color="default" defaultChecked />
<Switch label="Secondary" color="secondary" defaultChecked />
<Switch label="Success" color="success" defaultChecked />
<Switch label="Warning" color="warning" defaultChecked />
<Switch label="Error" color="error" defaultChecked />
<Switch label="Info" color="info" defaultChecked />

Sizes

Live preview

sm, md (default), and lg switch sizes

App.tsx
tsx
<Switch label="Small" size="sm" defaultChecked />
<Switch label="Medium (default)" size="md" defaultChecked />
<Switch label="Large" size="lg" defaultChecked />

With icons

Live preview

Show icons inside the thumb using checkedIcon and uncheckedIcon props

App.tsx
tsx
const [wifi, setWifi] = useState(true)
const [bell, setBell] = useState(false)
const [check, setCheck] = useState(true)
 
<Switch
label="Wi-Fi"
checkedIcon="check"
uncheckedIcon="close"
checked={wifi}
onChange={e => setWifi(e.target.checked)}
/>
<Switch
label="Notifications"
checkedIcon="bell"
checked={bell}
onChange={e => setBell(e.target.checked)}
/>
<Switch
label="Sync"
checkedIcon="check"
checked={check}
onChange={e => setCheck(e.target.checked)}
/>

Label positions

Live preview

Label can appear on the right (default) or left of the switch

App.tsx
tsx
const [left, setLeft] = useState(true)
const [right, setRight] = useState(false)
 
<Switch label="Label on the right (default)" labelPosition="right" checked={right} onChange={e => setRight(e.target.checked)} />
<Switch label="Label on the left" labelPosition="left" checked={left} onChange={e => setLeft(e.target.checked)} />

Card style

Live preview

Bordered card layout — ideal for settings panels

App.tsx
tsx
const [darkMode, setDarkMode] = useState(false)
const [autoSave, setAutoSave] = useState(true)
const [analytics, setAnalytics] = useState(false)
 
<Switch
card
label="Dark mode"
description="Switch to a darker color scheme"
checked={darkMode}
onChange={e => setDarkMode(e.target.checked)}
/>
<Switch
card
label="Auto-save"
description="Save your work automatically every minute"
checked={autoSave}
onChange={e => setAutoSave(e.target.checked)}
/>
<Switch
card
label="Analytics"
description="Help improve the product by sharing usage data"
checked={analytics}
onChange={e => setAnalytics(e.target.checked)}
disabled
/>

Props / API

Api Props

Props

PropTypeDefaultDescription
labelReactNode—Label text shown next to the switch
helperTextstring—Helper text shown below the label
descriptionstring—Description inside the card (card=true only)
size'sm' | 'md' | 'lg''md'Size of the switch
color'default' | 'secondary' | 'success' | 'warning' | 'error' | 'info''default'Color when on
labelPosition'left' | 'right''right'Position of the label relative to the switch
checkedIconstring—Icon name shown inside the thumb when on
uncheckedIconstring—Icon name shown inside the thumb when off
cardbooleanfalseWraps the switch in a bordered card
disabledbooleanfalseDisables the switch
checkedboolean—Controlled checked state
defaultCheckedbooleanfalseUncontrolled initial checked state
onChangeReact.ChangeEventHandler<HTMLInputElement>—Change event callback