Switch - Dreamy UI

Switch

Switch is used to select one or more options from a list.

#

Installation

pnpm dlx dreamy add switch

#

Usage

Switch allows users to toggle between two states (on/off). Use it for boolean settings and preferences in forms or configuration panels.

Default

<Switch>
	Default
</Switch>

#

Scheme

Change the color scheme of the Switch.

<Switch scheme="primary" defaultChecked>Primary</Switch>
<Switch scheme="secondary" defaultChecked>Secondary</Switch>
<Switch scheme="success" defaultChecked>Success</Switch>
<Switch scheme="warning" defaultChecked>Warning</Switch>
<Switch scheme="error" defaultChecked>Error</Switch>
<Switch scheme="info" defaultChecked>Info</Switch>
<Switch scheme="none" defaultChecked>None</Switch>

#

Size

Change the Switch size.

SmMdLg

<Switch size="sm">Sm</Switch>
<Switch size="md">Md</Switch>
<Switch size="lg">Lg</Switch>

#

Controlled

Use isChecked with onChange or onChangeValue to control the Switch.

Selected: false

Controlled

export function ControlledSwitch() {
    const [isChecked, setIsChecked] = useState(false);
 
    return (
        <>
            <Text>Selected: {isChecked ? "true" : "false"}</Text>
            <Switch
                isChecked={isChecked}
                onChangeValue={setIsChecked}
            >
                Controlled
            </Switch>
        </>
    );
}

#

Props

Switch is a compound control: a styled root label, a hidden checkbox input, a visual control track, a thumb, and an optional text label.

Prop	Forwarded to	Description
`onChange`	hidden input	Native checkbox change event
`onChangeValue`	hidden input	Boolean callback when the value changes
`name`, `value`, `tabIndex`, `autoFocus`	hidden input	Standard form input attributes
`isChecked`, `defaultChecked`, `isIndeterminate`	hidden input	Checked state
`isDisabled`, `isReadOnly`, `isRequired`, `isInvalid`	root + hidden input	Field state
`inputProps`	hidden input	Extra props for the hidden checkbox
`wrapperProps`	control `span`	Props for the visual track
`labelProps`	label `span`	Props for the text label
`thumbProps`	thumb	Props for the animated thumb
`scheme`, `size`	root	Recipe variants
other HTML/`data-*` props	root	Applied to the root `label`

Use top-level props such as name and onChange for the common case. Reach for inputProps, wrapperProps, labelProps, and thumbProps when you need to target a specific internal element.

Email notifications

<Switch
    name="notifications"
    defaultChecked
    inputProps={{ "aria-label": "Email notifications" }}
    wrapperProps={{ "data-testid": "switch-control" }}
    labelProps={{ className: "font-medium" }}
>
    Email notifications
</Switch>

Stepper

Table