Switch

A control that allows the user to toggle between checked and not checked.

Airplane Mode

@react.component
let make = () =>
  <div className="flex items-center space-x-2">

Installation


npx shadcn@latest add @rescript-shadcn/Switch

<Switch />

Share across devices

Focus is shared across devices, and turns off when you leave the app.

@react.component
let make = () =>
  <Field orientation=BaseUi.Types.Orientation.Horizontal className="max-w-sm">

Card-style selection where FieldLabel wraps the entire Field for a clickable card pattern.

Share across devices

Focus is shared across devices, and turns off when you leave the app.

Enable notifications

Receive notifications when focus mode is enabled or disabled.

@react.component
let make = () =>
  <Field.Group className="w-full max-w-sm">

Add the disabled prop to the Switch component to disable the switch. Add the data-disabled prop to the Field component for styling.

Disabled

@react.component
let make = () =>
  <Field orientation=BaseUi.Types.Orientation.Horizontal dataDisabled={true} className="w-fit">

Add the aria-invalid prop to the Switch component to indicate an invalid state. Add the data-invalid prop to the Field component for styling.

Accept terms and conditions

You must accept the terms and conditions to continue.

@react.component
let make = () =>
  <Field orientation=BaseUi.Types.Orientation.Horizontal className="max-w-sm" dataInvalid={true}>

Use the size prop to change the size of the switch.

Small

Default

@react.component
let make = () =>
  <Field.Group className="w-full max-w-[10rem]">

See the Base UI Switch documentation.