Radio Group

The RadioGroup and RadioGroupItem components are reusable and customizable radio input elements. They are built with Radix's RadioGroup components.

Example

Preview

One

Two

Three

Code

import React, { useState } from 'react';
import { RadioGroup, RadioGroupItem } from '@hv/ui/radio-group';
import { Label } from '@hv/ui/label';

export default function RadioGroupExample() {
  const [selectedValue, setSelectedValue] = useState('1');

  const handleSelection = e => {
    setSelectedValue(e.target.value);
  };

  return (
    <RadioGroup value={selectedValue}>
      <div className='flex items-center gap-2'>
        <RadioGroupItem id='1' value='1' onClick={e => handleSelection(e)} />
        <Label htmlFor='1'>One</Label>
      </div>
      <div className='flex items-center gap-2'>
        <RadioGroupItem id='2' value='2' onClick={e => handleSelection(e)} />
        <Label htmlFor='2'>Two</Label>
      </div>
      <div className='flex items-center gap-2'>
        <RadioGroupItem id='3' value='3' onClick={e => handleSelection(e)} />
        <Label htmlFor='3'>Three</Label>
      </div>
    </RadioGroup>
  );
}

Props

Radio Group

Name	Description	Type
className	Additional classes for styling the radio group.	String
ref	Forwarded reference to the element.	React.Ref<RadioGroupPrimitive.Root>
props	Additional properties from Radix Radio Group.	RadioGroup

Radio Group Item

Name	Description	Type
className	Additional classes for styling the radio group.	String
ref	Forwarded reference to the element.	React.Ref<RadioGroupPrimitive.Item>
props	Additional properties from Radix Radio Group.	RadioGroup

Customization

Customizations to this component can be made directly to the source file in the UI library package or one-off styles can be passed in as className overrides.