Radio Button | NDS - Vanilla National Design System

Radio Button Group

Mutually exclusive options with shared validation and required state

Select your plan

Basic Core features for individuals

Professional Advanced tools for teams

Enterprise Full access with dedicated support

Built-in Features

What you get out of the box with zero configuration

Form Integration

Auto-initializes with the forms system. Two-way binding syncs disabled and required states between inputs and containers.

Group Validation

Required selection enforced on form submit. Auto-revalidates on change once an error is shown. Call NDS.Forms.clearStatus() to reset.

Visual Feedback

Ripple effect on hover, smooth state transitions, and three sizes (SM, MD, LG) with proportional scaling.

Responsive Layout

Column layout by default, row layout with nds-rowView class. Gaps adjust on mobile for touch-friendly spacing.

Usage Guidelines

When and how to use radio buttons effectively

When to Use

Selecting exactly one option from a mutually exclusive set
Use checkboxes when multiple selections are allowed
Use a select dropdown when there are more than 7 options
Use switches for instant on/off actions without form submission
Always provide a default selection when possible to avoid empty submissions
Wrap options in a fieldset with a legend that describes what the user is choosing

JavaScript API


// Validate a radio group manually
var group = document.querySelector('.nds-radio-group');
var result = NDS.Forms.validateRadioGroup(group);
// result: { valid: false, selected: false, message: 'Please select an option' }

// Validate without showing feedback
NDS.Forms.validateRadioGroup(group, { showMessage: false });

// Set status manually (error, success, warning, info)
NDS.Forms.setStatus({ element: group, status: 'error', message: 'Please select an option' });

// Clear validation status
NDS.Forms.clearStatus(group);

Validation Attributes

Add data-required to the group to require a selection before form submission
Add data-error-message on the group to override the default validation message
Place a nds-form-footer with data-feedback-target inside the group for dynamic feedback placement
Use data-state="disabled" on the group to disable all radio buttons at once