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
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | React.ReactNode | undefined | - | - | The contents of the radio group component |
hideLabel | boolean | undefined | false | - | Hides the label next to the Radio button |
isDisabled | boolean | undefined | false | - | Toggles disabled state for all radio buttons in RadioGroup |
model | never | string | undefined | - | - | model is only used when the input is bound to a form via useForm. Model name used to bind the input to the form state. Only used inside a FormProvider. |
onChange | (value: string) => void | undefined | - | - | Callback fired when the radio group value is changed |
shrink | boolean | undefined | false | - | Places the label beside the radio button |
side | 'left' | 'right' | undefined | 'left' | - | Defines the side label lands on |
validations | Validations | undefined | - | - | Set rules for the input to be valid. Valid in both useState and useForm modes. Set rules for the input to be valid. |
value | string | undefined | - | - | Sets value of RadioGroup |
RadioGroup.Radio Props
| Name | Type | Default | Required | Description |
|---|---|---|---|---|
children | React.ReactNode | undefined | - | - | Sets the label of Radio button |
hideLabel | boolean | undefined | false | - | Hides label text |
isDisabled | boolean | undefined | false | - | Toggles disabled state for individual radio button |
label | string | undefined | - | - | Label of the radio button |
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-root | Radio root element |
| abyss-radio-outer-circle | Outer circle element |
| abyss-radio-inner-circle | Inner circle element |
| abyss-radio-label | Radio label 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 |