yarn add @twilio-paste/visual-picker - or - yarn add @twilio-paste/core
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>
);
};
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
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
VISUAL_PICKER_RADIO_GROUP
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
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
labelText RequiredRequired
Label text for the radio
- Type
string
value RequiredRequired
Pass to VisualPickerRadioGroup value when checked
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
VISUAL_PICKER_RADIO
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
name RequiredRequired
Provides name for the VisualPicker groups and items
- Type
string
element
Overrides the default element name to apply unique styles with the Customization Provider.
- Type
any- Default
VISUAL_PICKER_CHECKBOX_GROUP
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
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.
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
any- Default
VISUAL_PICKER_CHECKBOX
Inherited props
Paste components will often extend native HTML elements and as a result will inherit or extend their available properties. Below is a list of the props this component has inherited and are also available to use.