Components组件Base UIBase UI 组件
Toggle
A two-state button that can be either on or off.
Partially translated: Chinese navigation, titles, descriptions, and common headings. The technical body is currently in English.
Loading JGuang UI example…
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/toggle.tsx
Update the import paths to match your project setup.
Usage
import { Toggle } from "@/components/ui/toggle"
<Toggle>Toggle</Toggle>
Outline
Use variant="outline" for an outline style.
Loading JGuang UI example…
With Text
Loading JGuang UI example…
Size
Use the size prop to change the size of the toggle.
Loading JGuang UI example…
Disabled
Loading JGuang UI example…
RTL
To enable RTL support in JGuang UI, see the RTL configuration guide.
Loading JGuang UI example…
API Reference
See the Base UI Toggle documentation.
Source: components/base/toggle.mdx
Technical documentation for JGuang UI.