Switch

Installation

Command

Manual

Use the JGuang UI Registry URL provided on /systems/jguang-ui#install.

Install the following dependencies:

npm install @base-ui/react

Copy and paste the following code into your project.

View complete source: components/ui/switch.tsx

Update the import paths to match your project setup.

Usage

import { Switch } from "@/components/ui/switch"

<Switch />

Description

Choice Card

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

Disabled

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

Invalid

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.

Size

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

RTL

To enable RTL support in JGuang UI, see the RTL configuration guide.

API Reference

See the Base UI Switch documentation.