Radio

Component for making a single selection between a few options.

Basic usage

A RadioList should be used within a <fieldset> with a <legend> to describe the selection of options. By default, this list is vertical, with the label placed to the right.

Horizontal list

In some cases you may want to horizontally align the list, which is achieved by adding a horizontal-prop. With a horizontal list, you have the option to either align the radios to the left or using the entire width. Wrap the RadioList in an element, for instance the fieldset, with width w-full to spread them, or use w-max to only utilize the width of the content, forcing the radios to the left, shown below.

Bottom labelling

For special cases, such as forms and surveys, it might be more suiting to place the label below the radio, by using the labelPosition-prop. By wrapping the list with a fieldset set as w-full the buttons will center align.

With multiple options

The RadioList can take multiple Radio's. Keep in mind that one should try to limit the amount to six radios, otherwise another component might be more suiting for your case.

With disabled option

With the disabled-prop you can disable specific radios.

With Error option

The RadioList also supports Error-handling. Pass in a boolean to the hasError-prop, and the error message provided will be shown below the list.

With custom Error

The error message can be styled as you like, by passing in component of your choice as shown below. For instance, you can use the Message-component and styling it with a Heading, Icon and type.