Switch
A toggle switch control with optional label and description, built on Base UI’s Field primitive.
Base UI Primitive
Built on @base-ui/react/field wrapping a switch control
Import
import { Switch } from "@soft-ui/react/switch"
Usage
import { Switch } from "@soft-ui/react/switch"
export default function Example() {
return (
<Switch
label="Enable notifications"
description="Receive email notifications about updates"
/>
)
}
Props
Label text displayed next to the switch.
Description text displayed below the label.
position
'left' | 'right'
default:"'right'"
Position of the label relative to the switch.
left: Label on the left, switch on the rightright: Switch on the left, label on the right
Disables the switch and applies disabled styles.
Controlled checked state.
Uncontrolled default checked state.
onCheckedChange
(checked: boolean) => void
Callback fired when checked state changes.
Name attribute for form submission.
Value attribute for form submission.
Additional CSS classes for the control.
Additional CSS classes for the container (when label/description is present).
Examples
Basic
import { Switch } from "@soft-ui/react/switch"
export default function Basic() {
return <Switch label="Enable notifications" />
}
With Description
import { Switch } from "@soft-ui/react/switch"
export default function WithDescription() {
return (
<Switch
label="Marketing emails"
description="Receive updates about new features and promotions"
/>
)
}
Label Position
import { Switch } from "@soft-ui/react/switch"
export default function LabelPosition() {
return (
<div className="flex flex-col gap-4">
<Switch label="Label on right (default)" position="right" />
<Switch label="Label on left" position="left" />
</div>
)
}
Controlled
import { Switch } from "@soft-ui/react/switch"
import { useState } from "react"
export default function Controlled() {
const [enabled, setEnabled] = useState(false)
return (
<div className="flex flex-col gap-4">
<Switch
label="Controlled switch"
checked={enabled}
onCheckedChange={setEnabled}
/>
<p>Status: {enabled ? "On" : "Off"}</p>
</div>
)
}
Disabled
import { Switch } from "@soft-ui/react/switch"
export default function Disabled() {
return (
<Switch
label="Disabled switch"
disabled
/>
)
}