WUI logo

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@welcome-ui/radio-groupBuilt with Ariakit
OverviewProps
import * as React from 'react'
import { RadioGroup } from '@welcome-ui/radio-group'


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


const Example = () => {
  return <RadioGroup name="social" options={ITEMS.slice(0, 5)} />
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/radio-group
2

Import component:

import { RadioGroup } from '@welcome-ui/radio-group'

Examples

Variants

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

Disabled

Add disabled property

Hint

An example with a hint on radio.

PickerRadio tab