Skip to contentSkip to navigationSkip to topbar
Paste
FigmaStar

Visual Picker

Visual Picker is a stylistically enhanced checkbox or radio selection element.

Version 2.0.2
Github
Storybook

Installation

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

Usage

Usage page anchor
import {VisualPickerRadioGroup, VisualPickerRadio} from '@twilio-paste/core/visual-picker';

const VisualPickerExample = () => {
  const [value, setValue] = React.useState('1');
  return (
    <VisualPickerRadioGroup
      legend="Select an option"
      name="visual-picker"
      value={value}
      onChange={(newValue) => setValue(newValue)}
    >
      <VisualPickerRadio labelText="one" value="1">
        Option one
      </VisualPickerRadio>
      <VisualPickerRadio labelText="two" value="2">
        Option two
      </VisualPickerRadio>
      <VisualPickerRadio labelText="three" value="3">
        Option three
      </VisualPickerRadio>
    </VisualPickerRadioGroup>
  );
};

Props

Props page anchor

VisualPickerRadioGroup

VisualPickerRadioGroup page anchor

legend RequiredRequired

String to render as the label text.

Type
NonNullable<ReactNode>

name RequiredRequired

Provides name for the VisualPicker groups and items

Type
string

onChange RequiredRequired

Type
(value: string) => void

value RequiredRequired

Set value equal to the value of the currently selected VisualPickerRadio

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
VISUAL_PICKER_RADIO_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

Label text for the required dot in the legend

Type
string
Default
(required)

orientation

Sets the direction of the visual picker group

Type
"horizontal" | "vertical"
Default
vertical

required

Make the Group required

Type
boolean

VisualPickerRadio

VisualPickerRadio page anchor

labelText RequiredRequired

Label text for the radio

Type
string

value RequiredRequired

Pass to VisualPickerRadioGroup value when checked

Type
string

disabled

Make the Radio Button disabled

Type
boolean

element

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

Type
string
Default
VISUAL_PICKER_RADIO

hasError

Adds an error state to the Radio Button

Type
boolean

id

ID for the Radio Button

Type
string

name

Name for the Radio Button Group

Type
string

VisualPickerCheckboxGroup

VisualPickerCheckboxGroup page anchor

legend RequiredRequired

String to render as the label text.

Type
NonNullable<ReactNode>

name RequiredRequired

Provides name for the VisualPicker groups and items

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
VISUAL_PICKER_CHECKBOX_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

Label text for the required dot in the legend

Type
string
Default
(required)

orientation

Sets the direction of the visual picker group

Type
"horizontal" | "vertical"
Default
vertical

required

Make the Group required

Type
boolean

VisualPickerCheckbox

VisualPickerCheckbox page anchor

checked RequiredRequired

Determines the checked state of the checkbox

Type
boolean

labelText RequiredRequired

Label text for the checkbox

Type
string

onChange RequiredRequired

Callback for when the checkbox changes

Type
(event: ChangeEvent<HTMLInputElement>) => void

element

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

Type
string
Default
VISUAL_PICKER_CHECKBOX

hasError

Type
boolean
Default
null

id

Type
string
Default
unique id

indeterminate

Type
boolean
Default
null

isSelectAll

Type
boolean
Default
null

isSelectAllChild

Type
boolean
Default
null