RadioGroup

The RadioGroup component is a collection of radio buttons that allows users to select one option from a set of mutually exclusive choices. It ensures that only one option can be selected at a time, providing a clear and accessible way to present multiple-choice options. This component is essential for forms and settings where a single selection is required.

Source Built with Ariakit

Github

import { RadioGroup } from 'welcome-ui/RadioGroup'

export const ITEMS = [
  { label: 'Bold', value: 'bold' },
  { label: 'Italic', value: 'italic' },
  { label: 'Strikethrough', value: 'strikethrough' },
  { label: 'Underline', value: 'underline' },
]

const Example = () => {
  return <RadioGroup hideLabel label="Basic Radio Group component" name="social" options={ITEMS} />
}

export default Example

Examples

Variants

Use warning, error, or success properties on Field to add a variant status on your RadioGroup. The label, hint or border color are set by magic 🪄

Github

Disabled

Add disabled property

Github

Hint

An example with a hint on radio.

Github

Radio Radio tab