| title | Switch |
|---|---|
| parent | Controls and forms |
| grand_parent | Components |
{: .no_toc }
A boolean that takes effect as soon as it moves.
import { Switch } from '@textui/widgets';
<Switch label="Follow tail" value onChange={(value) => console.log(value)} />| Prop | Type | Default | |
|---|---|---|---|
label |
string |
||
value |
boolean |
false |
|
onChange |
(value: boolean) => void |
||
labels |
[off: string, on: string] |
['off', 'on'] |
Words either side, so the state reads without colour. |
Plus everything on BoxProps.
Role: switch.
The difference from Checkbox is a promise to the reader, not a shape: a switch means the change has already happened, a checkbox means it will happen when the form is submitted. Putting a switch in a form with a Submit button breaks that promise.
labels renames the two states from ['off', 'on'], for a control whose states have names of their own.
- Editing keys and selection - the keys, the selection and the clipboard
- Checkbox - when submission is what applies it
- Button - when it is an action rather than a state