[component]

Dev Mode

Boolean field

Description

Use the Boolean field for single cell options that can be turned on and off only. Also called ‘toggle fields’ and ‘switch fields’.

Boolean field

Usage Guidelines

Use a boolean field for a binary option that can be either active or inactive.

Use this for an immediate state change. For example, turning off airplane mode.

Communicate why a boolean field is disabled.

Be concise; this is microcopy.

Don't

Do not use boolean to choose between non-binary options. Instead, use a multiselect (checkbox) or radio field.

Do not truncate text.

Accessibility

Users should be able to use the tab key to focus on the switch, and then the enter/space keys to interact with it.

Switches should have labels that can be read by screen readers.

Users should be able to click the labels to interact with the toggle.

Props

Name

Type

Required

Description

onChange

Required

value

boolean

Required

disabled

boolean

disabledHelperText

string

errorText

string

helperText

string

testID

string

Root test id for the primary interactive element or container.

testIDs

FieldTestIDs

title

string

variant

Status

Documentation:

Figma:

Web:

iOS:

Android:

Additional Documentation

NN/g article

Switch, Checkbox, Radio

Examples

Boolean Field

Boolean field

Boolean Field with Title

Boolean field

Yes

Disabled Boolean Field

Boolean field

Here's some help text

Disabled Boolean Field with Title

Boolean field

Yes

Here's some help text

Boolean Field without label

Boolean Field with Stored State