---
title: "Radio"
type: component
version: "2.1.2"
doc_version: "2.3.0"
status: stable
date: 2026-03-07
library: Frutjam
stack: tailwind_css
compatibility: universal
framework_agnostic: true
runtime_requirement: none
description: "Tailwind CSS Radio using native HTML inputs. Custom colors, sizes, and grouped sets for accessible, theme-aware single-choice form controls."
url: https://frutjam.com/components/radio
---

# Radio Component

 Radio button components allow users to select exactly one option from a set of mutually exclusive choices. Built with native HTML input elements and enhanced with Tailwind CSS, radio buttons support multiple sizes, colors, and states. Accessible and keyboard-navigable, radios are ideal for preference selection, filtering, and single-choice form questions.

| Class           | Type     | Description                                |
| --------------- | -------- | ------------------------------------------ |
| radio           | Base     | Styled radio button input                  |
| radio-circle    | Style    | Fully circular radio (default)             |
| radio-rounded   | Style    | Moderately rounded radio                   |
| radio-square    | Style    | Square radio with no rounding              |
| radio-disabled  | Modifier | Disabled appearance for non-input elements |
| radio-xs        | Size     | Extra small                                |
| radio-sm        | Size     | Small                                      |
| radio-md        | Size     | Medium (default)                           |
| radio-lg        | Size     | Large                                      |
| radio-xl        | Size     | Extra large                                |
| radio-2xl       | Size     | 2× extra large                             |
| radio-primary   | Color    | Primary theme color                        |
| radio-secondary | Color    | Secondary theme color                      |
| radio-accent    | Color    | Accent theme color                         |
| radio-neutral   | Color    | Neutral theme color                        |
| radio-info      | Color    | Info semantic color                        |
| radio-success   | Color    | Success semantic color                     |
| radio-warning   | Color    | Warning semantic color                     |
| radio-error     | Color    | Error semantic color                       |

## Basic Usage

## 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">
```


## Radio Shapes

### Square Radio

```html
<input type="radio" name="shape-demo" class="radio radio-square" checked="checked">
```


### Rounded or Circle Radio

```html
<input type="radio" name="shape-demo2" class="radio radio-circle" checked="checked">
<input type="radio" name="shape-demo2" class="radio radio-rounded" checked="checked">
```


## Radio with label

```html
<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>
```