RadioGroup

The RadioGroup input component is a group of radio buttons (RadioGroupOption components) that allow users to select only one option from the group at a time.

RadioGroup is often used in forms. See the Using Forms guide for details.

Properties

autoFocus (default: false)

If this property is set to true, the component gets the focus automatically when displayed.

enabled (default: true)

This boolean property value indicates whether the component responds to user events (true) or not (false).

This property indicates whether the input accepts user actions (true) or not (false). The default value is true.

<App>
  <RadioGroup initialValue="first" enabled="false">
    <HStack padding="$space-normal">
      <Option label="First Item" value="first"/>
      <Option label="Second Item" value="second"/>
      <Option label="Third Item" value="third"/>
    </HStack>
  </RadioGroup>
</App>

initialValue

This property sets the component's initial value.

This property defines the initial value of the selected option within the group.

<App>
  <RadioGroup initialValue="first">
    <HStack padding="$space-normal">
      <Option label="First Item" value="first"/>
      <Option label="Second Item" value="second"/>
      <Option label="Third Item" value="third"/>
    </HStack>
  </RadioGroup>
</App>

label

This property sets the label of the component.

labelBreak (default: false)

This boolean value indicates if the RadioGroup labels can be split into multiple lines if it would overflow the available label width.

labelPosition (default: "top")

Places the label at the given position of the component.

Available values:

labelWidth

This property sets the width of the RadioGroup.

orientation

(*** NOT IMPLEMENTED YET ***) This property sets the orientation of the options within the radio group.

readOnly (default: false)

Set this property to true to disallow changing the component value.

required

Set this property to true to indicate it must have a value before submitting the containing form.

validationStatus (default: "none")

This property allows you to set the validation status of the input component.

Available values:

This prop is used to visually indicate status changes reacting to form field validation.

<App>
  <HStack>
    <RadioGroup initialValue="first" validationStatus="error">
      <Option label="First Item" value="first"/>
      <Option label="Second Item" value="second"/>
    </RadioGroup>
    <RadioGroup initialValue="first" validationStatus="warning">
      <Option label="First Item" value="first"/>
      <Option label="Second Item" value="second"/>
    </RadioGroup>
    <RadioGroup initialValue="first" validationStatus="valid">
      <Option label="First Item" value="first"/>
      <Option label="Second Item" value="second"/>
    </RadioGroup>
  </HStack>
</App>

Events

didChange

This event is triggered when value of RadioGroup has changed.

This event is triggered after the user has changed the field value. The following example uses this event to display the selected option's value:

<App var.field="">
  <RadioGroup initialValue="{field}" onDidChange="(val) => field = val">
    <Option label="First Item" value="first"/>
    <Option label="Second Item" value="second"/>
  </RadioGroup>
  <Text value="{field}" />
</App>

Select one of the available options and see how the Text underneath it is updated in parallel:

gotFocus

This event is triggered when the RadioGroup has received the focus.

lostFocus

This event is triggered when the RadioGroup has lost the focus.

Exposed Methods

This component does not expose any methods.

Styling

RadioGroup is a component that governs its children and stores the selected value. It does not support styling; however, you can style the options within the group. When you set the theme variables for the group's options, use the RadioGroupOption name.

Theme Variables