Switch
Switches allow users to toggle between two states. They are commonly used for settings, feature flags, and binary options.
Example
Prop | Type | Default value | Description |
|---|---|---|---|
Prop label | Type ReactNode | Default value "" | Description Label text or content displayed next to the switch |
Prop orientation | Type "vertical" | "horizontal" | Default value "vertical" | Description Layout orientation - whether switch and label are arranged vertically or horizontally |
Prop dir | Type "start" | "end" | Default value "start" | Description Direction/position of the label relative to the switch (start = before, end = after) |
Prop checked | Type boolean | Default value false | Description Whether the switch is in the checked/on state |
Prop disabled | Type boolean | Default value false | Description Whether the switch is disabled and cannot be toggled |
Prop onCheckedChange | Type (checked: boolean) => void | Default value undefined | Description Callback function called when the switch state changes. Receives the new checked state. |
Quick start
import { Switch } from '@clickhouse/click-ui'
import { useState } from 'react'
function MySwitch() {
const [checked, setChecked] = useState(false)
return (
<Switch
id="example"
label="Enable notifications"
checked={checked}
onCheckedChange={setChecked}
/>
)
}Related components
- Checkbox: For selecting one or more items from a list.
- RadioGroup: For single selection from multiple options.
- Label: Provides accessible labels for switches.
- Container: For organizing multiple switches in layouts.
Common use cases
Settings toggle
import { Switch, Container } from '@clickhouse/click-ui'
import { useState } from 'react'
function SettingsToggles() {
const [notifications, setNotifications] = useState(true)
return (
<Container orientation='vertical' gap='sm'>
<Switch
id="notifications"
label="Enable notifications"
checked={notifications}
onCheckedChange={setNotifications}
/>
</Container>
)
}Feature toggle
import { Switch } from '@clickhouse/click-ui'
import { useState } from 'react'
function FeatureToggle() {
const [feature, setFeature] = useState(false)
return (
<Switch
id="feature"
label="Enable new feature"
checked={feature}
onCheckedChange={setFeature}
/>
)
}