Skip to content

Latest commit

 

History

History
160 lines (83 loc) · 3.68 KB

radio-group.md

File metadata and controls

160 lines (83 loc) · 3.68 KB

Radio group (RadioGroup)

A form element that enables the user to choose one of a predefined set of options.

Properties

ariaDescribedby

Adds aria-describedby to the component. If you're using this component within a form field, don't set this property because the form field component automatically sets it. Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for each element that you want to use as a description and set the property to a string of each ID separated by spaces (for example, "id1 id2 id3").

Type: String

Required: No

ariaLabel

Adds aria-label to the group. If you are using this form element within a form field, don't set this property because the form field component automatically sets the correct labels to make the component accessible.

Type: String

Required: No

ariaLabelledby

Adds aria-labelledby to the component. If you're using this component within a form field, don't set this property because the form field component automatically sets it. Use this property if the component isn't surrounded by a form field, or you want to override the value automatically set by the form field (for example, if you have two components within a single form field).

To use it correctly, define an ID for the element you want to use as label and set the property to that ID.

Type: String

Required: No

ariaRequired

Adds aria-required to the group.

Type: Boolean

Default: false

Valid values: true | false

Required: No

className

Adds the specified classes to the root element of the component.

Type: String

Required: No

controlId

Specifies the ID of the native form element. You can use it to relate a label element's for attribute to this control. It defaults to an automatically generated ID that is provided by its parent form field component.

Type: String

Required: No

id

Adds the specified ID to the root element of the component.

Type: String

Required: No

items

Specifies an array of radio buttons to display. Each of these objects have the following properties:

  • value (string) - Sets the value of the radio button. Assigned to the radio group when a user selects the radio button.
  • label (ReactNode) - Specifies a label for the radio button.
  • description (ReactNode) - (Optional) Specifies descriptive text that appears below the label.
  • disabled (boolean) - (Optional) Determines whether the radio button is disabled, which prevents the user from selecting it.
  • controlId (string) - (Optional) Sets the ID of the internal input. You can use it to relate a label element's for attribute to this control. In general it's not recommended to set this because the ID is automatically set by the radio group component.

Type: ReadonlyArray<RadioGroupProps.RadioButtonDefinition>

Required: No

name

Specify a custom name for the radio buttons. If not provided, the radio group generates a random name.

Type: String

Required: No

value

Sets the value of the selected radio button. If you want to clear the selection, use null.

Type: Null | string

Required: Yes

Events

onChange

Called when the user selects a different radio button. The event detail contains the current value.

Detail type:

RadioGroupProps.ChangeDetail {
  value: string
}

Cancelable: No

License Summary

The documentation is made available under the Creative Commons Attribution-ShareAlike 4.0 International License. See the LICENSE file.