Radio

Radio buttons allow the user to select one option from a set. Use RadioGroup for a complete set with validation support.

Basic RadioGroup

Radio group with label and options

// Dynamic import of the Radio components

const { RadioGroup } = await import('/components/data-input/radio.js');

const { tags, $ } = Lightview;
const { div } = tags;

// 1. Basic radio group
const basic = RadioGroup({
    label: 'Favorite Color',
    name: 'color',
    options: ['Red', 'Blue', 'Green', 'Yellow'],
    color: 'primary'
});

// 2. With descriptions
const withDesc = RadioGroup({
    label: 'Subscription Plan',
    name: 'plan',
    options: [
        { value: 'free', label: 'Free', description: 'Basic features, limited usage' },
        { value: 'pro', label: 'Pro', description: '$9/month, all features' },
        { value: 'enterprise', label: 'Enterprise', description: 'Custom pricing, priority support' }
    ],
    color: 'secondary'
});

// 3. Horizontal layout
const horizontal = RadioGroup({
    label: 'Size',
    name: 'size',
    options: ['S', 'M', 'L', 'XL'],
    horizontal: true,
    color: 'accent'
});

// Insert all examples
$('#demo').insert(
    div({ class: 'space-y-6 max-w-md' }, basic, withDesc, horizontal)
);

Reactive Example

Two-way binding with signals and validation


const { RadioGroup } = await import('/components/data-input/radio.js');

const { signal, tags, $ } = Lightview;
const { div, p, span } = tags;

// Signal for selected value
const selectedPriority = signal('');

// Priority descriptions
const priorityInfo = {
    low: { emoji: '🟢', text: 'Can wait, no rush' },
    medium: { emoji: '🟡', text: 'Should be addressed soon' },
    high: { emoji: '🟠', text: 'Needs attention today' },
    critical: { emoji: '🔴', text: 'Drop everything and fix now!' }
};

// Reactive radio group
const reactiveDemo = div({ class: 'space-y-4 max-w-md' },
    RadioGroup({
        label: 'Issue Priority',
        name: 'priority',
        value: selectedPriority,
        options: [
            { value: 'low', label: 'Low' },
            { value: 'medium', label: 'Medium' },
            { value: 'high', label: 'High' },
            { value: 'critical', label: 'Critical' }
        ],
        required: true,
        color: 'primary'
    }),
    p({ class: 'text-lg' },
        () => {
            const priority = selectedPriority.value;
            if (!priority) return span({ class: 'opacity-50' }, 'Select a priority level');
            const info = priorityInfo[priority];
            return span({}, info.emoji, ' ', info.text);
        }
    )
);

$('#demo').insert(reactiveDemo);

RadioGroup Props

Prop Type Default Description
options array [] Array of strings or objects {value, label, description, disabled}
value * | signal - Selected value (reactive with signals)
defaultValue * null Default value for uncontrolled mode
name string auto Radio group name for form submission
label string - Group label displayed above options
helper string - Helper text displayed below options
error string | function - Error message or reactive error function
validate function - Validation function: (value) => errorMessage | null
color string - 'primary' | 'secondary' | 'accent' | 'info' | 'success' | 'warning' | 'error'
size string 'md' 'xs' | 'sm' | 'md' | 'lg'
horizontal boolean false Arrange options horizontally
disabled boolean false Disable all options
required boolean false Mark as required field
onChange function - Callback when value changes: (value) => void
useShadow boolean * Render in Shadow DOM

Colors

Sizes

With Label

For more examples and styling options, see the DaisyUI Radio documentation.