mirror of
https://github.com/cosscom/coss.git
synced 2026-09-14 20:06:50 +08:00
Pasquale Vitiello
fd72ad7430
* docs: add API Reference sections to all component documentation - Add comprehensive API Reference sections to 36 component docs - Document custom props, variants, and behaviors for each component - Distinguish between Base UI aliases and custom components - Include prop tables with Type, Default, and Description columns - Follow alert-dialog.mdx as the reference standard for quality Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: add essential inline examples and 'Also exported as' notes - Add inline code example for Menu's inset prop showing alignment pattern - Add 'Also exported as ToggleGroupItem' note to Toggle component - Add ToggleGroupSeparator to toggle-group documentation - Add 'Also exported as RadioGroupItem' note to Radio component Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix section ordering - API Reference before Examples Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: remove references to non-exported components Co-Authored-By: pasquale@cal.com <pasquale@cal.com> * docs: fix inaccurate API documentation per Cubic AI review Co-Authored-By: pasquale@cal.com <pasquale@cal.com> --------- Co-authored-by: Devin AI <158243242+devin-ai-integration[bot]@users.noreply.github.com> Co-authored-by: pasquale@cal.com <pasquale@cal.com>
94 lines
2.0 KiB
Plaintext
94 lines
2.0 KiB
Plaintext
---
|
|
title: Switch
|
|
description: A control that indicates whether a setting is on or off.
|
|
|
|
links:
|
|
doc: https://base-ui.com/react/components/switch#api-reference
|
|
---
|
|
|
|
<ComponentPreview name="p-switch-1" />
|
|
|
|
## Installation
|
|
|
|
<CodeTabs>
|
|
|
|
<TabsList>
|
|
<TabsTab value="cli">CLI</TabsTab>
|
|
<TabsTab value="manual">Manual</TabsTab>
|
|
</TabsList>
|
|
<TabsPanel value="cli">
|
|
|
|
```bash
|
|
npx shadcn@latest add @coss/switch
|
|
```
|
|
|
|
</TabsPanel>
|
|
|
|
<TabsPanel value="manual">
|
|
|
|
<Steps>
|
|
|
|
<Step>Install the following dependencies:</Step>
|
|
|
|
```bash
|
|
npm install @base-ui/react
|
|
```
|
|
|
|
<Step>Copy and paste the following code into your project.</Step>
|
|
|
|
<ComponentSource name="switch" title="components/ui/switch.tsx" />
|
|
|
|
<Step>Update the import paths to match your project setup.</Step>
|
|
|
|
</Steps>
|
|
|
|
</TabsPanel>
|
|
|
|
</CodeTabs>
|
|
|
|
## Usage
|
|
|
|
```tsx
|
|
import { Switch } from "@/components/ui/switch"
|
|
```
|
|
|
|
```tsx
|
|
<Switch />
|
|
```
|
|
|
|
## API Reference
|
|
|
|
### Switch
|
|
|
|
Styled wrapper for `Switch.Root` from Base UI with built-in thumb. Size is controlled via the `--thumb-size` CSS variable.
|
|
|
|
## Examples
|
|
|
|
For accessible labelling and validation, prefer using the `Field` component to wrap checkboxes. See the related example: [Switch field](/ui/docs/components/field#switch-field).
|
|
|
|
### Disabled
|
|
|
|
<ComponentPreview name="p-switch-2" />
|
|
|
|
### With Description
|
|
|
|
<ComponentPreview name="p-switch-3" />
|
|
|
|
### Customizing Size
|
|
|
|
The switch size is controlled by the `--thumb-size` CSS variable. By default, the switch uses responsive sizing with `[--thumb-size:--spacing(5)] sm:[--thumb-size:--spacing(4)]` classes, making it slightly larger on mobile devices (like other interactive elements).
|
|
|
|
You can customize the size by overriding these CSS variable classes on the component. The `--thumb-size` value can be expressed using:
|
|
- The spacing scale: `--spacing(3)`, `--spacing(4)`, `--spacing(5)`, etc.
|
|
- Fixed units: `1rem`, `16px`, etc.
|
|
|
|
<ComponentPreview name="p-switch-6" />
|
|
|
|
### Card Style
|
|
|
|
<ComponentPreview name="p-switch-4" />
|
|
|
|
### Form Integration
|
|
|
|
<ComponentPreview name="p-switch-5" />
|