Components
Radio

Basic Forms

Tailwind CSS Radio

A radio input allows people to select only one option from a number of choices. Radio is generally displayed in a radio group.

Attention needed

By default Preline UI uses Tailwind CSS Forms plugin. Don't forget to install it!

Default

The default way to present a single option from a list.

Theme:

<div class="flex items-center">
                          <input type="radio" name="hs-default-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-checked-radio" checked>
                          <label for="hs-checked-radio" class="text-sm ms-3 text-muted-foreground-1">Checked radio</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="max-w-sm w-full space-y-3">
                        <div class="flex items-center">
                          <input type="radio" name="hs-default-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-default-radio">
                          <label for="hs-default-radio" class="text-sm ms-3 text-muted-foreground-1">Default radio</label>
                        </div>

Disabled

Disabled radio.

Theme:

<div class="flex opacity-40">
                          <input type="checkbox" name="hs-disabled-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked radio:opacity-50 radio:pointer-events-none" id="hs-radio-checked-checkbox" checked disabled>
                          <label for="hs-radio-checked-checkbox" class="text-sm ms-3 text-muted-foreground-1">Radio checked checkbox</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="max-w-sm w-full space-y-3">
                        <div class="flex opacity-40">
                          <input type="checkbox" name="hs-disabled-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked radio:opacity-50 radio:pointer-events-none" id="hs-radio-checkbox" disabled>
                          <label for="hs-radio-checkbox" class="text-sm ms-3 text-muted-foreground-1">Radio checkbox</label>
                        </div>

Inline radio group

A group of radio components.

Theme:

<div class="flex items-center">
                          <input type="radio" name="hs-radio-group" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-group-3">
                          <label for="hs-radio-group-3" class="ms-3 text-sm text-muted-foreground-2">Orange</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="flex gap-x-6">
                        <div class="flex items-center">
                          <input type="radio" name="hs-radio-group" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-group-1" checked>
                          <label for="hs-radio-group-1" class="ms-3 text-sm text-muted-foreground-2">Apple</label>
                        </div>

<div class="flex items-center">
                          <input type="radio" name="hs-radio-group" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-group-3">
                          <label for="hs-radio-group-3" class="ms-3 text-sm text-muted-foreground-2">Orange</label>
                        </div>
                      </div>

Vertical radio group

A vertical group of radio components.

Theme:

<div class="flex items-center">
                          <input type="radio" name="hs-radio-vertical-group" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-group-3">
                          <label for="hs-radio-group-3" class="text-sm ms-3 text-muted-foreground-1">Orange</label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="flex flex-col gap-y-3">
                        <div class="flex items-center">
                          <input type="radio" name="hs-radio-vertical-group" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-group-1" checked>
                          <label for="hs-radio-group-1" class="text-sm ms-3 text-muted-foreground-1">Apple</label>
                        </div>

<div class="flex items-center">
                          <input type="radio" name="hs-radio-vertical-group" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-group-3">
                          <label for="hs-radio-group-3" class="text-sm ms-3 text-muted-foreground-1">Orange</label>
                        </div>
                      </div>

List with description

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xs mx-auto mt-8"><div class="max-w-sm w-full space-y-3">
                        <div class="relative flex items-start">
                          <div class="flex items-center h-5 mt-1">
                            <input id="hs-radio-delete" name="hs-radio-with-description" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" aria-describedby="hs-radio-delete-description" checked>
                          </div>
                          <label for="hs-radio-delete" class="ms-3">
                            <span class="block text-sm font-semibold text-foreground">Delete</span>
                            <span id="hs-radio-delete-description" class="block text-sm text-muted-foreground-2">Notify me when this action happens.</span>
                          </label>
                        </div>

<div class="relative flex items-start">
                          <div class="flex items-center h-5 mt-1">
                            <input id="hs-radio-archive" name="hs-radio-with-description" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" aria-describedby="hs-radio-archive-description">
                          </div>
                          <label for="hs-radio-archive" class="ms-3">
                            <span class="block text-sm font-semibold text-foreground">Archive</span>
                            <span id="hs-radio-archive-description" class="block text-sm text-muted-foreground-2">Notify me when this action happens.</span>
                          </label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="max-w-sm w-full space-y-3">
                        <div class="relative flex items-start">
                          <div class="flex items-center h-5 mt-1">
                            <input id="hs-radio-delete" name="hs-radio-with-description" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" aria-describedby="hs-radio-delete-description" checked>
                          </div>
                          <label for="hs-radio-delete" class="ms-3">
                            <span class="block text-sm font-semibold text-foreground">Delete</span>
                            <span id="hs-radio-delete-description" class="block text-sm text-muted-foreground-2">Notify me when this action happens.</span>
                          </label>
                        </div>

Radio within form input

Radio components within form input stacked in a grid format.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-5 sm:mt-12"><div class="grid sm:grid-cols-2 gap-2">
                        <label for="hs-radio-in-form" name="hs-radio-in-form" class="flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <input type="radio" name="hs-radio-in-form" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-in-form">
                          <span class="text-sm ms-3 text-muted-foreground-1">Default radio</span>
                        </label>

<label for="hs-radio-checked-in-form" name="hs-radio-in-form" class="flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <input type="radio" name="hs-radio-in-form" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-checked-in-form" checked>
                          <span class="text-sm ms-3 text-muted-foreground-1">Checked radio</span>
                        </label>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="grid sm:grid-cols-2 gap-2">
                        <label for="hs-radio-in-form" name="hs-radio-in-form" class="flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <input type="radio" name="hs-radio-in-form" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-in-form">
                          <span class="text-sm ms-3 text-muted-foreground-1">Default radio</span>
                        </label>

Radio components within form input vertically grouped.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xs mx-auto mt-5"><div class="max-w-sm w-full space-y-3">
                        <label for="hs-vertical-radio-in-form" class="max-w-xs flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-vertical-radio-in-form">
                          <span class="text-sm ms-3 text-muted-foreground-1">Default radio</span>
                        </label>

<label for="vertical-radio-checked-in-form" class="max-w-xs flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="vertical-radio-checked-in-form" checked>
                          <span class="text-sm ms-3 text-muted-foreground-1">Checked radio</span>
                        </label>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="max-w-sm w-full space-y-3">
                        <label for="hs-vertical-radio-in-form" class="max-w-xs flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <input type="radio" name="hs-vertical-radio-in-form" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-vertical-radio-in-form">
                          <span class="text-sm ms-3 text-muted-foreground-1">Default radio</span>
                        </label>

On right

Checkbox placed on the right side.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-5 sm:mt-12"><div class="grid sm:grid-cols-2 gap-2">
                        <label for="hs-radio-on-right" class="flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <span class="text-sm text-muted-foreground-1">Default radio</span>
                          <input type="radio" name="hs-radio-on-right" class="shrink-0 ms-auto mt-0.5 shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-on-right">
                        </label>

<label for="hs-radio-radio-on-right" class="flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <span class="text-sm text-muted-foreground-1">Checked radio</span>
                          <input type="radio" name="hs-radio-on-right" class="shrink-0 ms-auto mt-0.5 shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-radio-on-right" checked>
                        </label>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="grid sm:grid-cols-2 gap-2">
                        <label for="hs-radio-on-right" class="flex items-center p-3 w-full bg-layer border border-layer-line rounded-lg text-sm focus:border-primary-focus focus:ring-primary-focus">
                          <span class="text-sm text-muted-foreground-1">Default radio</span>
                          <input type="radio" name="hs-radio-on-right" class="shrink-0 ms-auto mt-0.5 shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" id="hs-radio-on-right">
                        </label>

With list group

Make the list item appear with checkbox.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xs mx-auto mt-4"><ul class="max-w-sm flex flex-col">
                        <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-layer border border-layer-line text-layer-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                          <div class="relative flex items-start w-full">
                            <div class="flex items-center h-5">
                              <input id="hs-list-group-item-radio-1" name="hs-list-group-item-radio" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked>
                            </div>
                            <label for="hs-list-group-item-radio-1" class="block ms-3 w-full text-sm text-muted-foreground-2">
                              Chris Lynch
                            </label>
                          </div>
                        </li>

<li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-layer border border-layer-line text-layer-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                          <div class="relative flex items-start w-full">
                            <div class="flex items-center h-5">
                              <input id="hs-list-group-item-radio-2" name="hs-list-group-item-radio" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                            </div>
                            <label for="hs-list-group-item-radio-2" class="block ms-3 w-full text-sm text-muted-foreground-2">
                              Maria Guan
                            </label>
                          </div>
                        </li>

<ul class="max-w-sm flex flex-col">
                        <li class="inline-flex items-center gap-x-2 py-3 px-4 text-sm font-medium bg-layer border border-layer-line text-layer-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg">
                          <div class="relative flex items-start w-full">
                            <div class="flex items-center h-5">
                              <input id="hs-list-group-item-radio-1" name="hs-list-group-item-radio" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked>
                            </div>
                            <label for="hs-list-group-item-radio-1" class="block ms-3 w-full text-sm text-muted-foreground-2">
                              Chris Lynch
                            </label>
                          </div>
                        </li>

With horizontal list group

Make a horizontal list group item appear with checkbox.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xl mx-auto mt-5 sm:mt-12"><ul class="flex flex-col sm:flex-row">
                        <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-layer border border-layer-line text-layer-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-lg sm:last:rounded-es-none sm:last:rounded-se-lg">
                          <div class="relative flex items-start w-full">
                            <div class="flex items-center h-5">
                              <input id="hs-horizontal-list-group-item-radio-1" name="hs-horizontal-list-group-item-radio" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked>
                            </div>
                            <label for="hs-horizontal-list-group-item-radio-1" class="block ms-3 w-full text-sm text-muted-foreground-2">
                              Chris Lynch
                            </label>
                          </div>
                        </li>

<li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-layer border border-layer-line text-layer-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-lg sm:last:rounded-es-none sm:last:rounded-se-lg">
                          <div class="relative flex items-start w-full">
                            <div class="flex items-center h-5">
                              <input id="hs-horizontal-list-group-item-radio-2" name="hs-horizontal-list-group-item-radio" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none">
                            </div>
                            <label for="hs-horizontal-list-group-item-radio-2" class="block ms-3 w-full text-sm text-muted-foreground-2">
                              Maria Guan
                            </label>
                          </div>
                        </li>

<ul class="flex flex-col sm:flex-row">
                        <li class="inline-flex items-center gap-x-2.5 py-3 px-4 text-sm font-medium bg-layer border border-layer-line text-layer-foreground -mt-px first:rounded-t-lg first:mt-0 last:rounded-b-lg sm:-ms-px sm:mt-0 sm:first:rounded-se-none sm:first:rounded-es-lg sm:last:rounded-es-none sm:last:rounded-se-lg">
                          <div class="relative flex items-start w-full">
                            <div class="flex items-center h-5">
                              <input id="hs-horizontal-list-group-item-radio-1" name="hs-horizontal-list-group-item-radio" type="radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-primary focus:ring-0 focus:ring-offset-0 checked:bg-primary-checked checked:border-primary-checked disabled:opacity-50 disabled:pointer-events-none" checked>
                            </div>
                            <label for="hs-horizontal-list-group-item-radio-1" class="block ms-3 w-full text-sm text-muted-foreground-2">
                              Chris Lynch
                            </label>
                          </div>
                        </li>

Validation states

It provides valuable, actionable feedback to your users with HTML5 form validation.

Theme:

<!DOCTYPE html>
                      <html lang="en" dir="" class="relative min-h-full h-full">
                        <head>
                          <meta charset="utf-8">
                          <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
                          <title>Preline UI</title>
                          <link rel="shortcut icon" href="../favicon.ico">
                          <link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap" rel="stylesheet">
                          <link rel="stylesheet" href="../assets/css/main.min.css">
                        </head>
                        <body class="w-full max-w-xs mx-auto mt-12"><div class="max-w-sm w-full space-y-3">
                        <div>
                          <label for="hs-error-radio" class="flex items-center space-x-3">
                            <input type="radio" name="hs-states-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-red-600 focus:ring-0 focus:ring-offset-0 checked:bg-red-600 checked:border-red-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-error-radio" disabled>
                            <span class="text-sm text-red-500">This is an error radio</span>
                          </label>
                        </div>

<div>
                          <label for="hs-success-radio" class="flex items-center space-x-3">
                            <input type="radio" name="hs-states-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-teal-600 focus:ring-0 focus:ring-offset-0 checked:bg-teal-600 checked:border-teal-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-success-radio" checked>
                            <span class="text-sm text-teal-500">This is a success radio</span>
                          </label>
                        </div>
                      </div>
                          <script src="../assets/vendor/preline/dist/index.js?v=4.0.1"></script>
                        </body>
                      </html>

<div class="max-w-sm w-full space-y-3">
                        <div>
                          <label for="hs-error-radio" class="flex items-center space-x-3">
                            <input type="radio" name="hs-states-radio" class="shrink-0 size-4 bg-transparent border-line-3 rounded-full shadow-2xs text-red-600 focus:ring-0 focus:ring-offset-0 checked:bg-red-600 checked:border-red-600 disabled:opacity-50 disabled:pointer-events-none" id="hs-error-radio" disabled>
                            <span class="text-sm text-red-500">This is an error radio</span>
                          </label>
                        </div>

Tailwind CSS Radio

Attention needed

Basic usage

Default

Disabled

Inline radio group

Vertical radio group

List with description

Radio within form input

On right

With list group

With horizontal list group

Validation states

On this page