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

Radio Group

Version 13.1.1GithubStorybook

A Radio Group is a form element that lets users select a single choice from a list of at least two options.

Installation

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

Usage

Usage page anchor
import {Radio, RadioGroup} from '@twilio-paste/core/radio-group';

const Component = () => (
  <RadioGroup name="foo" value="foo" legend="foo" onChange={NOOP}>
    <Radio id="foo" value="foo" name="foo">
      Foo
    </Radio>
  </RadioGroup>
);

Props

Props page anchor

Radio

Radio 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

hasError

Adds an error state to the Radio Button

Type
boolean

helpText

Provides additional help text for the Radio Button

Type
| string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | ReactFragment | ReactPortal

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

RadioGroup

RadioGroup page anchor

legend RequiredRequired

String to render as the label text.

Type
NonNullable<ReactNode>

name RequiredRequired

Name for the Radio Button Group

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

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