Radio Group

A set of checkable buttons—known as radio buttons—where no more than one of the buttons can be checked at a time.
# Demo

Horizontal:

Vertical:

# Attributes
NameTypeDefaultDetails
classNamestring' 'You can customise by passing tailwind classes.
itemClassNamestring' 'You can customise by passing tailwind classes.
radioClassNamestring' 'You can customise by passing tailwind classes.
labelClassNamestring' 'You can customise by passing tailwind classes.
orientationvertical | horizontalhorizontalYou can pass radio group orientation.
disabledbooleanfalseYou can pass disabled to set default checkbox state.
itemsRadioItem[]RequiredYou can pass list of radio items.
selectedstringRequiredYou can pass default selected item.
onChange(selected: string) => voidRequiredYou can get callback when radio group changed.
# Usage
import { useState } from 'react'; import { NRadioGroup } from 'nayan'; 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-text mb-3 text-base">Horizontal:</h1> <NRadioGroup items={items} selected={selected} setSelected={setSelected} /> <div className="mt-5" /> <h1 className="text-text mb-3 text-base">Vertical:</h1> <NRadioGroup orientation="vertical" items={items} selected={selected} setSelected={setSelected} /> </div> ); }; export default RadioGroup;