Figma
Star462

Radio Button Group

Radio Button Group is a set of related, mutually exclusive options where only one can be selected at a time.

yarn add @twilio-paste/radio-button-group - or - yarn add @twilio-paste/core
import {RadioButtonGroup, RadioButton} from '@twilio-paste/core/radio-button-group';

const Component = () => (
  <RadioButtonGroup attached>
    <RadioButton>One</RadioButton>
    <RadioButton>Two</RadioButton>
    <RadioButton>Three</RadioButton>
  </RadioButtonGroup>
);

checked

Sets the Radio Button as checked

Type
boolean

defaultChecked

Sets the Radio Button as the default checked option

Type
boolean

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
RADIO_BUTTON

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

value

Value for the Radio Button

Type
string

legend RequiredRequired

String to render as the label text.

Type
NonNullable<ReactNode>

name RequiredRequired

Name for the Radio Button Group

Type
string

attached

If the group of buttons are visually attached

Type
boolean

disabled

Make the Group disabled

Type
boolean

element

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

Type
string
Default
RADIO_BUTTON_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

Overrides the default string marking the group as required

Type
string
Default
(required)

onChange

Pass a function for the onChange handler

Type
(value: string) => void

orientation

Sets the direction in which the group is rendered.

Type
"horizontal" | "vertical"

required

Make the Group required

Type
boolean

value

Value for the Radio Button Group

Type
string

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.