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.

Demo

Plan

StartupBusinessEnterprise

Usage

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

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

const RadioGroupExample = () => {
  const [selected, setSelected] = useState(items[0].value);

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

export default RadioGroup;

Attributes

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

Usage

Attributes

Tags