Skip to contentSkip to navigationSkip to topbar
Figma
Star

Checkbox

Version 13.1.1GithubStorybook

A Checkbox is a form element that enables a binary choice and a Checkbox Group is a collection of Checkboxes.

Installation

Installation page anchor
yarn add @twilio-paste/checkbox - or - yarn add @twilio-paste/core
import {Checkbox, CheckboxGroup} from '@twilio-paste/core/checkbox';

const Component = () => (
  <CheckboxGroup name="foo" legend="foo">
    <Checkbox id="foo" value="foo" name="foo">
      Foo
    </Checkbox>
  </CheckboxGroup>
);

Checkbox

Checkbox page anchor

checked

Use on the currently selected checkbox

Type
boolean
Default
null

defaultChecked

Only for use with uncontrolled checkboxes

Type
boolean
Default
null

element

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

Type
string
Default
CHECKBOX

hasError

Type
boolean
Default
null

helpText

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

id

Type
string
Default
unique id

indeterminate

Type
boolean
Default
null

isSelectAll

Type
boolean
Default
null

isSelectAllChild

Type
boolean
Default
null

legend RequiredRequired

String to render as the label text.

Type
NonNullable<ReactNode>

name RequiredRequired

Type
string
Default
null

disabled

Make the Group disabled

Type
boolean

element

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

Type
string
Default
CHECKBOX_GROUP

errorText

String to render as the error text.

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

fieldStyleProps

Type
BoxStyleProps

helpText

String to render as the help text.

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

i18nRequiredLabel

Accessible label for the required dot

Type
string
Default
(required)

isSelectAll

Type
boolean
Default
null

onChange

Type
(checked: boolean) => void
Default
null

orientation

Sets the direction in which the group is rendered.

Type
"horizontal" | "vertical"

required

Make the Group required

Type
boolean

checked

Use on the currently selected checkbox

Type
boolean
Default
null

defaultChecked

Only for use with uncontrolled checkboxes

Type
boolean
Default
null

element

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

Type
string
Default
CHECKBOX_DISCLAIMER

errorText

Sets the Checkbox Group in error state

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

id

Type
string
Default
unique id