RadioTab

The RadioTab component is a collection of radio tab 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'
import { RadioTab } from 'welcome-ui/RadioTab'

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="RadioGroup component rendered as RadioTab"
      name="social"
      options={ITEMS}
      renderOption={RadioTab}
    />
  )
}

export default Example

Examples

Disabled

Add disabled property

Github

Radio group Search