Skip to contentSkip to navigationSkip to topbar
Paste
Paste assistant Assistant
FigmaStar

Radio Button Group

Version 4.1.1GithubStorybook

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

Installation

Installation page anchor
yarn add @twilio-paste/radio-button-group - or - yarn add @twilio-paste/core

Usage

Usage page anchor
import {RadioButtonGroup, RadioButton} from '@twilio-paste/core/radio-button-group';

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

Props

Props page anchor

RadioButton

RadioButton page anchor

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

RadioButtonGroup

RadioButtonGroup page anchor

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