Figma
Star462

Checkbox

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

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>
);

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

To help us improve this site, we use tools that set cookies. The data gathered by these tools is anonymized. If you reject the use of cookies, no analytics service will be initiated.