Tailwind CSS Radio

Build Tailwind CSS radio buttons with inline and vertical groups, descriptions, cards, list groups, right-aligned controls, disabled, and validation states.

Heads up!

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

Default radio

Use a standard radio input when users should choose exactly one option from a set.

<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.2.0"></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

Disable a radio option to show a choice that is currently unavailable.

<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.2.0"></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

Display related radio options inline when the set is short and fits comfortably on one row.

<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.2.0"></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

Stack radio options vertically when labels are longer or you need a clearer scan path.

<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.2.0"></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>

Radios with descriptions

Add supporting text under each radio option to explain the impact of a single-choice selection.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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 cards

Wrap radio inputs inside bordered cards to create larger selection targets in a grid layout.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>

Vertical radio cards

Use vertically stacked radio cards when each option needs more space in a narrow layout.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>

Right-aligned radio

Move the radio control to the right when the label content should lead visually.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>

Radio list group

Combine radios with list group items to build single-select lists with consistent borders and spacing.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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>

Horizontal radio list group

Use the same list group pattern in a horizontal layout for compact single-select rows.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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

Show valid and invalid states to give clear feedback when a radio selection is required in a form.

<!DOCTYPE html>
                          <html lang="en" dir="ltr" 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.2.0"></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>