Switch
Toggle control rendered as a styled checkbox with role="switch". Accepts label and description text.
Preview
ON YOUR TERMS
PreferencesA little less noise.
Choose what reaches you. Leave the rest behind.
The occasional note about what is new.
Stay close to the conversations that matter.
Your workspace highlights, all in one place.
The right fit.
Import
import { Switch } from '@velocityuikit/velocityui'Props
| Prop | Type | Default | Description |
|---|---|---|---|
| label | string | — | Label text rendered beside the switch. |
| description | string | — | Helper text rendered below. |
| size | 'sm' | 'md' | 'lg' | 'md' | Controls the switch track and thumb size. |
| checked | boolean | — | Controlled checked state. |
| defaultChecked | boolean | — | Uncontrolled default. |
| disabled | boolean | false | Disables the switch. |
Examples
Basic
import { Switch } from '@velocityuikit/velocityui'
export default function Example() {
return <Switch label="Enable notifications" defaultChecked />
}Sizes
import { Switch } from '@velocityuikit/velocityui'
export default function Example() {
return (
<div style={{ display: 'flex', flexDirection: 'column', gap: '1rem' }}>
<Switch size="sm" label="Small" defaultChecked />
<Switch size="md" label="Medium" defaultChecked />
<Switch size="lg" label="Large" defaultChecked />
</div>
)
}Theming
Apply a named theme class to <body> or any parent element. All VelocityUI components inside that element will automatically adopt its colors, shadows, and effects. Combine with a density modifier for complete control:
/* Pick any named theme */
<body class="vui-theme-ocean">
/* Add a density modifier (optional) */
<body class="vui-theme-midnight vui-density-compact">
<body class="vui-theme-construction vui-density-spacious">
/* Available themes */
/* default midnight ocean dark-cyan tangerine */
/* construction glass soft high-contrast monochrome-red */
/* Available densities */
/* vui-density-compact vui-density-comfortable vui-density-spacious */