Switch

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)} />

Props

| Prop | Type | Default | | | — | — | — | — | | label | string | | | | value | boolean | false | | | onChange | (value: boolean) => void | | | | labels | [off: string, on: string] | | 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.

See also

• 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