Radio
The <Radio> and <Radio.Group> components allow users to select one option from a set of options. They are useful for presenting a list of options to users and collecting their responses.
The <Radio> should never be used alone, there should always be at least two <Radio> from which you can choose. For that the <Radio.Group> should be wrapped around the <Radio>. If you want one option you could use the <Checkbox> instead.
Import
import { Radio } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
Radio
| Property | Type | Default | Description |
|---|---|---|---|
value | string | none% | Set the value of the radio. |
error | boolean | false | If `true`, the radio is considered invalid and if set the `errorMessage` is shown. |
width | string | number | full | Sets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width |
disabled | boolean | false | Set the radio disabled. |
Radio.Group
| Property | Type | Default | Description |
|---|---|---|---|
label | string | none | Set the label of the radio group. |
orientation | horizontal | vertical | vertical | Set the radio group direction. |
defaultValue | string | none | Set the default value for the radio group. |
error | boolean | false | If `true`, the radio is considered invalid and if set the `errorMessage` is shown. |
width | string | 100% | Control the width of the field |
readOnly | boolean | false | Set the radio group as read only. |
required | boolean | false | Set the radio group required. |
disabled | boolean | false | Set the radio group disabled. |
description | string | none | Set the radio group helptext. |
errorMessage | string | none | Set the radio group error message if an error occures. |
Examples
Simple Radio
In this example you can see a simple <Radio.Group> within <Radio>. There is also a single <Radio> disabled.
Disabed Radio
Here you can see a complete disabled <Radio.Group>. You can also just disable single <Radio>.
Required Radio with horizontal orientation
In this example the <Radio.Group> is required and the orientation is set to horizontal. With these props you can determine the direction of the <Radio> options.
Error Radio
In this example you can see how an errorMessage would look on a <RadioGroup>.