mirror of
https://github.com/Kong/insomnia.git
synced 2026-01-02 03:00:07 -05: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 c57abf6178.
* 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
|