WUI logo

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


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)} renderOption={RadioTab} />
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/radio-tab
2

Import component:

import { RadioTab } from '@welcome-ui/radio-tab'

Examples

Disabled

Add disabled property

Radio groupSearch