Switch

Version 5.1.1Github StorybookPeer review pending

A switch is an interactive binary control.

Installation

yarn add @twilio-paste/switch - or - yarn add @twilio-paste/core

Usage

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

SwitchGroup

name RequiredRequired

Type: string

element

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

Type: any
Default: SWITCH_GROUP

i18nRequiredLabel

Used to internatonalize the required label text

Type: any
Default: (required)

onChange

Type: (checked: boolean) => void

orientation

Sets the render direction of the switch group

Type: any
Default: vertical

Inherited props

Switch

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: any
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