Skip to content

Radio <ERadio>

Radio inputs are normally presented in radio groups (a collection of radio buttons describing a set of related options). Only one radio button in a group can be selected at the same time.

Variant

Use the variant prop to change the input theming according to your configured variants.

Highlight

Set the highlight prop to override the default border color with the variant color.

Highlight is automatically set to true if the feedback prop is populated. Set highlight to false to override feedback highlighting.

Labels

Use the label, and description props to describe your radio input.

You can also use slots for more freedom on label content. Please see the Slots section for information on slot variables.

Block

By default the radio component is displayed as an inline element. By adding the block prop, the input container will span the whole container width.

Disabled

A disabled radio cannot be interacted with.

Feedback

Use the feedback slot to add validation or other form errors to your radio input. Elements provides variants for error and success feedback types.

Component Reference

Released under the MIT License.