Components
Radio group

Radio Group

A radio group allows users to make a single choice from a selected number of options.

UsageTypes

API reference docs for the component. Learn about the props, CSS, and other APIs of this exported module.

RadioProps

value

string

disabled

boolean

invalid

boolean

RadioContext

value

string

disabled

boolean

invalid

boolean

RadioGroupProps

defaultValue

string

dir

'ltr' | 'rtl'

The document's text/writing direction.

disabled

boolean

If `true`, the radio group will be disabled

form

string

The associate form of the underlying input.

getRootNode

() => ShadowRoot | Node | Document

A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.

id

string

The unique identifier of the machine.

ids

Partial<{ root: string label: string indicator: string radio(value: string): string radioLabel(value: string): string radioControl(value: string): string radioHiddenInput(value: string): string }>

The ids of the elements in the radio. Useful for composition.

name

string

The name of the input fields in the radio (Useful for form submission).

onValueChange

(details: ValueChangeDetails) => void

Function called once a radio is checked

orientation

'horizontal' | 'vertical'

Orientation of the radio group

value

string

The value of the checked radio

RadioGroupContext

clearValue

() => void

Function to clear the value of the radio group

focus

() => void

Function to focus the radio group

getRadioControlProps

(props: RadioProps) => Dict<any>

getRadioHiddenInputProps

(props: RadioProps) => Dict<any>

getRadioLabelProps

(props: RadioProps) => Dict<any>

getRadioProps

(props: RadioProps) => Dict<any>

getRadioState

(props: RadioProps) => RadioState

Returns the state details of a radio input

indicatorProps

Dict<any>

labelProps

Dict<any>

rootProps

Dict<any>

setValue

(value: string) => void

Function to set the value of the radio group

value

string

The current value of the radio group