import { RadioGroup } from '@uhg-abyss/mobile';useForm (recommended)
Using the useForm hook for handling RadioGroup lets the DOM handle form data.
useState
Using the useState hook gets values from the component state.
Label
Use the label prop to pass a string as the text next to the radio button.
Children
Content passed to the radio as children will be displayed in place of the label prop. If a value is passed to the label prop in addition to children, the label prop will take priority.
Side
Use the side prop to place the label text on the left or right side of the radio buttons. By default, the prop is set to left, which is the upper example.
isDisabled
isDisabled will disable the radio button. It can be added to either the RadioGroup or the individual Radio components.
hideLabel
The hideLabel prop hides the label by each radio button, and is set to false by default.
shrink
The shrink property brings labels and radio buttons closer together than the default. By default, shrink prop is set to false.
RadioGroup Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | The contents of the radio group component |
| hideLabel | boolean | false | Hides the label next to Radio button |
| isDisabled | boolean | false | Toggles disabled state for all radio buttons in RadioGroup |
| onChange | function | - | Callback fired when the radio group value is changed |
| shrink | boolean | false | Places the label beside the radio button |
| side | "left" | "right" | left | Defines the side label lands on |
| value | string | - | Sets value of RadioGroup |
RadioGroup.Radio Props
| Prop Name | Type | Default | Description |
|---|---|---|---|
| children | node | - | Sets the label of radioButton |
| hideLabel | boolean | false | Hides label text |
| isDisabled | boolean | false | Toggles disabled state for individual Radio button |
| label | string | - | Sets label of radioButton. The label prop will override children |
| value | string | - | Sets value of Radio button |
RadioGroup Classes
| Class Name | Description |
|---|---|
| abyss-radio-group-root | RadioGroup root element |
RadioGroup.Radio Classes
| Class Name | Description |
|---|---|
| abyss-radio-inner-circle | Inner circle element |
| abyss-radio-label | Radio label element |
| abyss-radio-outer-circle | Outer circle element |
| abyss-radio-root | Radio root element |
Dynamic Type
RadioButton scales up to 3XL.
RadioGroup Tokens
| Token Name | Value | |
|---|---|---|
| radio.color.surface.control.enabled.rest | #FFFFFF | |
| radio.color.surface.control.disabled | #CBCCCD | |
| radio.color.surface.thumb.enabled.rest | #FFFFFF | |
| radio.color.surface.thumb.disabled | #929496 | |
| radio.color.border.control.enabled.default.rest | #929496 | |
| radio.color.border.control.enabled.selected.rest | #196ECF | |
| radio.color.border.control.disabled.default | #929496 | |
| radio.color.border.control.disabled.selected | #929496 | |
| radio.color.text.label | #323334 | |
| radio.border-radius.all.control | 500 | |
| radio.border-radius.all.thumb | 500 | |
| radio.border-width.all.control | 2 | |
| radio.sizing.all.control | 20 | |
| radio.spacing.padding.all.control | 2 | |
| radio.spacing.gap.horizontal.container | 8 |