Radio

Allows single selection from multiple options

Each set of radio inputs should have unique name attributes to avoid conflicts with other sets on the same page.

Basic

Basic Radio

Preview Code Auto

Input(type='radio', name='radio-1', checked='checked', cls='radio'),
Input(type='radio', name='radio-1', cls='radio')

Sizes

Preview Code Auto

Input(type='radio', name='radio-2', checked='checked', cls='radio radio-xs'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-sm'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-md'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-lg'),
Input(type='radio', name='radio-2', checked='checked', cls='radio radio-xl')

Variants

Primary Color

Preview Code Auto

Input(type='radio', name='radio-color-0', checked='', cls='radio radio-primary'),
Input(type='radio', name='radio-color-0', checked='checked', cls='radio radio-primary')

Secondary Color

Preview Code Auto

Input(type='radio', name='radio-color-1', checked='', cls='radio radio-secondary'),
Input(type='radio', name='radio-color-1', checked='checked', cls='radio radio-secondary')

Accent Color

Preview Code Auto

Input(type='radio', name='radio-color-2', checked='', cls='radio radio-accent'),
Input(type='radio', name='radio-color-2', checked='checked', cls='radio radio-accent')

Neutral Color

Preview Code Auto

Input(type='radio', name='radio-color-3', checked='', cls='radio radio-neutral'),
Input(type='radio', name='radio-color-3', checked='checked', cls='radio radio-neutral')

Info Color

Preview Code Auto

Input(type='radio', name='radio-color-4', checked='', cls='radio radio-info'),
Input(type='radio', name='radio-color-4', checked='checked', cls='radio radio-info')

Success Color

Preview Code Auto

Input(type='radio', name='radio-color-5', checked='', cls='radio radio-success'),
Input(type='radio', name='radio-color-5', checked='checked', cls='radio radio-success')

Warning Color

Preview Code Auto

Input(type='radio', name='radio-color-6', checked='', cls='radio radio-warning'),
Input(type='radio', name='radio-color-6', checked='checked', cls='radio radio-warning')

Error Color

Preview Code Auto

Input(type='radio', name='radio-color-7', checked='', cls='radio radio-error'),
Input(type='radio', name='radio-color-7', checked='checked', cls='radio radio-error')

Disabled State

Preview Code Auto

Input(type='radio', name='disabled-radio', disabled=True, cls='radio'),
Input(type='radio', name='disabled-radio', disabled=True, checked=True, cls='radio'),

Class Reference

Class	Type	Description
radio	Component	Base radio class
radio-neutral	Color	Neutral color variant
radio-primary	Color	Primary color variant
radio-secondary	Color	Secondary color variant
radio-accent	Color	Accent color variant
radio-success	Color	Success color variant
radio-warning	Color	Warning color variant
radio-info	Color	Info color variant
radio-error	Color	Error color variant
radio-xs	Size	Extra small size
radio-sm	Size	Small size
radio-md	Size	Medium size [Default]
radio-lg	Size	Large size
radio-xl	Size	Extra large size

Do you have a question? ask the community

Do you see a bug? open an issue on GitHub

LLMs Context: Full Markdown | This Component

Resources: DaisyUI | TailwindCSS | FastHTML Repo