mirror of
https://github.com/Kong/insomnia.git
synced 2026-04-18 05:08:40 -04:00
e43bd82620
* feat: form component * feat: use twMerge to support class overide * Spike: Add markdown format doc support for base-components (#9368) * initial check-in * add things * update select.mdx * use react live things * add package-json * Revert "add package-json" This reverts commit c57abf6178f39e631ec7fe6634cb4e6afd950fdb. * update comment * update docs * type fix * tailwind v4 upgrade * upgrade tailwind v4 in docusaurus * feat: add more components (#9426) * update * update --------- Co-authored-by: Kent Wang <kent.wang@konghq.com>
65 lines
1.9 KiB
Plaintext
65 lines
1.9 KiB
Plaintext
---
|
|
id: switch
|
|
sidebar_label: 'Switch'
|
|
sidebar_position: 4
|
|
---
|
|
|
|
import { Switch } from 'insomnia/src/ui/components/base/switch';
|
|
|
|
# Switch Component
|
|
|
|
A toggle switch component built on top of React Aria Components, providing an accessible binary on/off control with smooth animations and visual feedback.
|
|
|
|
## Props
|
|
|
|
| Prop | Type | Required | Description |
|
|
| ----------------- | ------------------------------- | -------- | -------------------------------------------- |
|
|
| `isSelected` | `boolean` | No | Controlled selected state |
|
|
| `defaultSelected` | `boolean` | No | Default selected state for uncontrolled mode |
|
|
| `onChange` | `(isSelected: boolean) => void` | No | Callback fired when the switch state changes |
|
|
| `isDisabled` | `boolean` | No | Whether the switch is disabled |
|
|
|
|
## Usage Examples
|
|
|
|
```tsx live
|
|
<Switch />
|
|
```
|
|
|
|
### With Default State
|
|
|
|
```tsx live
|
|
<Switch defaultSelected={true} />
|
|
```
|
|
|
|
### Disabled State
|
|
|
|
```tsx live
|
|
<Switch isDisabled />
|
|
```
|
|
|
|
### Readonly
|
|
|
|
```tsx live
|
|
<Switch isDisabled />
|
|
```
|
|
|
|
## Styling
|
|
|
|
### CSS Variables
|
|
|
|
The component uses the following CSS variables for theming:
|
|
|
|
- `--color-bg`: Switch background color (track and selected knob)
|
|
- `--color-surprise`: Switch primary color (unselected knob, selected track)
|
|
- `--hl`: Border color for track and disabled state
|
|
|
|
You can customize these variables in your CSS to theme the switch appearance.
|
|
|
|
## Differences from Checkbox
|
|
|
|
While visually different, Switch and Checkbox serve similar purposes. Use Switch when:
|
|
|
|
- The change takes effect immediately (no submit required)
|
|
- Toggling between two distinct states (on/off, enabled/disabled)
|
|
- The action is more about activation/deactivation than selection
|