Tailwind CSS Radio Components

Radio buttons allow users to select exactly one option from a set of mutually exclusive choices. This component supports various sizes and colors. It is typically used in forms where only one answer is required. Labels can be added to ensure the component is accessible to all types of users.

Basic Usage

html

<input type="radio" name="radio-1" class="radio" checked="checked">
<input type="radio" name="radio-1" class="radio">

Radio Sizes

html

<input type="radio" name="radio-sizes" class="radio radio-xs" checked="checked">
<input type="radio" name="radio-sizes" class="radio radio-sm" checked="checked">
<input type="radio" name="radio-sizes" class="radio radio-md" checked="checked">
<input type="radio" name="radio-sizes" class="radio radio-lg" checked="checked">
<input type="radio" name="radio-sizes" class="radio radio-xl" checked="checked">

Radio Colors

html

<input type="radio" name="radio-colors" class="radio" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-primary" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-secondary" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-accent" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-info" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-success" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-warning" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-error" checked="checked">
<input type="radio" name="radio-colors" class="radio radio-neutral" checked="checked">

Disabled radio

html

<input type="radio" class="radio" disabled="">
<input type="radio" class="radio" disabled="" checked="checked">

Square radio

html

<input type="checkbox" class="radio radio-square" checked="checked">

Rounded or circle radio

html

<input type="checkbox" class="radio radio-circle" checked="checked">
<input type="checkbox" class="radio radio-rounded" checked="checked">

Radio with label

html

SmallMediumLarge

<input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-small" name="size" value="small">
<label for="size-small">Small</label>

<input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-medium" name="size" value="medium">
<label for="size-medium">Medium</label>

<input type="radio" class="radio radio-circle radio-neutral radio-sm" id="size-large" name="size" value="large">
<label for="size-large">Large</label>