Radio Group

The Radio Group component provides you with radio button groups and selections.

Live Examples

Storybook: components-radiogroup--default

Storybook: components-radiogroup--horizontal

Storybook: components-radiogroup--form-example

Code Examples

import { RadioGroup, RadioGroupItem, Label } from '@nostromo/ui-core'
 
export default function RadioGroupExample() {
  return (
    <RadioGroup defaultValue="option1">
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option1" id="r1" />
        <Label htmlFor="r1">Option 1</Label>
      </div>
      <div className="flex items-center space-x-2">
        <RadioGroupItem value="option2" id="r2" />
        <Label htmlFor="r2">Option 2</Label>
      </div>
    </RadioGroup>
  )
}

Props

Prop	Type	Default	Description
`value`	`string`	-	Selected value
`defaultValue`	`string`	-	Default selected value
`onValueChange`	`function`	-	Change handler
`disabled`	`boolean`	`false`	Whether radio group is disabled

Checkbox Switch