Radio Group

A Radio Group component is a UI element that allows users to select one option from a set of mutually exclusive choices. It typically consists of multiple radio buttons, where only one button can be selected at a time. Radio groups are commonly used in forms to gather user preferences, ensuring a clear and organized way to present options for selection. They enhance user experience by providing a straightforward interface for making single-choice decisions.

Usage

Source

RadioGroup.tsx

import { useState } from 'react';
import { NRadioGroup } from '@nayan-ui/react';

const items = [
  { label: 'Startup', value: 'startup' },
  { label: 'Business', value: 'business' },
  { label: 'Enterprise', value: 'enterprise' }
];

const RadioGroup = () => {
  const [value, setValue] = useState('startup');

  return (
    <div>
      <h1 className="text-foreground mb-3 text-base">Horizontal:</h1>
      <NRadioGroup label="Plan" items={items} value={value} onChange={setValue} />
      <div className="mt-5" />
      <h1 className="text-foreground mb-3 text-base">Vertical:</h1>
      <NRadioGroup orientation="vertical" label="Plan" items={items} value={value} onChange={setValue} />
    </div>
  );
};

export default RadioGroup;

Attributes

12 props

Name	Type	Default	Details
orientation	'horizontal' \| 'vertical'	Optional	Orientation of radio group.
items	RadioItem[]	Required	Array of radio items.
className	string	' '	You can customise by passing tailwind classes.
id	string	Optional	ID for the radio group.
label	string	Optional	Label for the radio group.
itemClassName	string	' '	You can customise by passing tailwind classes.
radioClassName	string	' '	You can customise by passing tailwind classes.
labelClassName	string	' '	You can customise by passing tailwind classes.
disabled	boolean	false	Whether the radio group is disabled.
value	string	Required	Selected radio value.
onChange	(selected: string) => void	Required	Callback when selection changes.
showLabel	boolean	Optional	Whether to show labels.

Radio Group

Demo

Horizontal:

Vertical:

Usage

Attributes

Tags