Component which allows to select only one option from a list.

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.



To import the component you just have to use this code below.

import { Radio } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


valuestringnone%Set the value of the radio.
errorbooleanfalseIf `true`, the radio is considered invalid and if set the `errorMessage` is shown.
widthstring | numberfullSets the width of the field. You can see allowed tokens here:
disabledbooleanfalseSet the radio disabled.

Group Props

labelstringnoneSet the label of the radio group.
orientationhorizontal | verticalverticalSet the radio group direction.
defaultValuestringnoneSet the default value for the radio group.
errorbooleanfalseIf `true`, the radio is considered invalid and if set the `errorMessage` is shown.
widthstring100%Control the width of the field
readOnlybooleanfalseSet the radio group as read only.
requiredbooleanfalseSet the radio group required.
disabledbooleanfalseSet the radio group disabled.
descriptionstringnoneSet the radio group helptext.
errorMessagestringnoneSet the radio group error message if an error occures.


In this example you can see a simple <Radio.Group> within <Radio>. There is also a single <Radio> disabled.

Simple Radio

Choose dessert

Disabed Radio

Here you can see a complete disabled <Radio.Group>. You can also just disable single <Radio>.

Radio Group

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.

Radio Group

Error Radio

In this example you can see how an errorMessage would look on a <RadioGroup>.

Radio Group
Oh no! An error occured.