Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Switch

Version 5.1.1GithubStorybookPeer review pending

A switch is an interactive binary control.

Installation

Installation page anchor
yarn add @twilio-paste/switch - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {Switch, SwitchGroup} from '@twilio-paste/core/switch';
export const Basic = () => {
  return (
    <SwitchGroup name="bar" legend="This is the legend text" required disabled>
      <Switch value="1" helpText="This is some help text.">
        First
      </Switch>
      <Switch value="2" helpText="This is some help text.">
        Second
      </Switch>
      <Switch value="3" helpText="This is some help text.">
        Third
      </Switch>
    </SwitchGroup>
  );
};

Props

Props page anchor

SwitchGroup

SwitchGroup page anchor

legend RequiredRequired

String to render as the label text.

Type
NonNullable<ReactNode>

name RequiredRequired

Type
string

disabled

Make the Group disabled

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SWITCH_GROUP

errorText

String to render as the error text.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

helpText

String to render as the help text.

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

i18nRequiredLabel

Used to internatonalize the required label text

Type
string
Default
(required)

onChange

Type
(checked: boolean) => void

orientation

Sets the render direction of the switch group

Type
"vertical" | "horizontal"
Default
vertical

required

Make the Group required

Type
boolean

Switch

Switch page anchor

checked

Sets the checked property on the Switch

Type
boolean

defaultChecked

Sets checked state on initial render when uncontrolled

Type
boolean

element

Overrides the default element name to apply unique styles with the Customization Provider

Type
string
Default
SWITCH

hasError

Sets the switch into an error state

Type
boolean

helpText

Display additional text to help guide the user

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

id

Type
string