Radio

Professional radio button components for single-choice selections with smooth animations.

Radio Variants

Standard Radio Group

Basic radio button group

Radio with Description

Radio buttons with additional helper text

Horizontal Radio Group

Radio buttons in horizontal layout

Radio Sizes

Different size variants

Radio States

Different radio button states

Real Estate Use Cases

Property Condition

Implementation Guide

HTML Structure

<!-- Radio Group -->
<div class="lyd-radio-set">
    <label class="lyd-radio-group">
        <input type="radio" name="group-name" class="lyd-radio-input">
        <span class="lyd-radio"></span>
        <span class="lyd-radio-label">Option 1</span>
    </label>
    
    <label class="lyd-radio-group">
        <input type="radio" name="group-name" class="lyd-radio-input">
        <span class="lyd-radio"></span>
        <span class="lyd-radio-label">Option 2</span>
    </label>
</div>

<!-- Radio with Description -->
<label class="lyd-radio-group">
    <input type="radio" name="group" class="lyd-radio-input">
    <span class="lyd-radio"></span>
    <div>
        <div class="lyd-radio-label">Main Label</div>
        <div class="lyd-radio-description">Helper text</div>
    </div>
</label>

React/Next.js Component

// components/RadioGroup.tsx
import { InputHTMLAttributes, forwardRef } from 'react';

interface RadioOption {
  value: string;
  label: string;
  description?: string;
}

interface RadioGroupProps {
  name: string;
  options: RadioOption[];
  value?: string;
  onChange?: (value: string) => void;
  orientation?: 'vertical' | 'horizontal';
  size?: 'small' | 'medium' | 'large';
  disabled?: boolean;
}

export const RadioGroup = ({
  name,
  options,
  value,
  onChange,
  orientation = 'vertical',
  size = 'medium',
  disabled = false
}: RadioGroupProps) => {
  return (
    <div className={`lyd-radio-set ${orientation === 'horizontal' ? 'horizontal' : ''}`}>
      {options.map((option) => (
        <label key={option.value} className={`lyd-radio-group ${size}`}>
          <input
            type="radio"
            name={name}
            value={option.value}
            checked={value === option.value}
            onChange={(e) => onChange?.(e.target.value)}
            className="lyd-radio-input"
            disabled={disabled}
          />
          <span className="lyd-radio" />
          {option.description ? (
            <div>
              <div className="lyd-radio-label">{option.label}</div>
              <div className="lyd-radio-description">{option.description}</div>
            </div>
          ) : (
            <span className="lyd-radio-label">{option.label}</span>
          )}
        </label>
      ))}
    </div>
  );
};

API Reference

Class Description
.lyd-radio-set Container for radio button group
.lyd-radio-group Container for radio and label
.lyd-radio-input Hidden native radio input
.lyd-radio Custom radio visual
.lyd-radio-label Radio label text
.lyd-radio-description Helper text below label
.horizontal Horizontal layout for radio set
.small Small size variant
.large Large size variant
.error Error state styling

Accessibility & Best Practices

Keyboard Navigation

  • Arrow keys to navigate between options
  • Space to select option
  • Tab to move to next element

Screen Reader Support

  • Use semantic radio inputs
  • Group with fieldset and legend
  • Provide clear, descriptive labels
  • Announce selected state

Best Practices

  • Always provide a default selection
  • Use consistent naming for groups
  • Keep options concise
  • Limit to 5-7 options
  • Consider dropdown for many options