Laravel TailwindCss Inputs Components

Input Group

Input with label and help text

<div>
  <label for="email" class="block text-sm/6 font-medium text-gray-900">Email</label>
  <div class="mt-2">
    <input type="email" name="email" id="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="you@example.com" aria-describedby="email-description">
  </div>
  <p class="mt-2 text-sm text-gray-500" id="email-description">We'll only use this for spam.</p>
</div>

Input with validation error

<div>
  <label for="email" class="block text-sm/6 font-medium text-gray-900">Email</label>
  <div class="mt-2 grid grid-cols-1">
    <input type="email" name="email" id="email" class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pl-3 pr-10 text-base text-red-900 outline outline-1 -outline-offset-1 outline-red-300 placeholder:text-red-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-red-600 sm:pr-9 sm:text-sm/6" placeholder="you@example.com" value="adamwathan" aria-invalid="true" aria-describedby="email-error">
    <svg class="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-red-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
      <path fill-rule="evenodd" d="M8 15A7 7 0 1 0 8 1a7 7 0 0 0 0 14ZM8 4a.75.75 0 0 1 .75.75v3a.75.75 0 0 1-1.5 0v-3A.75.75 0 0 1 8 4Zm0 8a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
    </svg>
  </div>
  <p class="mt-2 text-sm text-red-600" id="email-error">Not a valid email address.</p>
</div>

Input with disabled state

<div>
  <label for="email" class="block text-sm/6 font-medium text-gray-900">Email</label>
  <div class="mt-2">
    <input type="email" name="email" id="email" value="you@example.com" disabled class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 disabled:cursor-not-allowed disabled:bg-gray-50 disabled:text-gray-500 disabled:outline-gray-200 sm:text-sm/6" placeholder="you@example.com">
  </div>
</div>

Input with corner hint

<div>
  <div class="flex justify-between">
    <label for="email" class="block text-sm/6 font-medium text-gray-900">Email</label>
    <span class="text-sm/6 text-gray-500" id="email-optional">Optional</span>
  </div>
  <div class="mt-2">
    <input type="email" name="email" id="email" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="you@example.com" aria-describedby="email-optional">
  </div>
</div>

Input with leading icon

<div>
  <label for="email" class="block text-sm/6 font-medium text-gray-900">Email</label>
  <div class="mt-2 grid grid-cols-1">
    <input type="email" name="email" id="email" class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pl-10 pr-3 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:pl-9 sm:text-sm/6" placeholder="you@example.com">
    <svg class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
      <path d="M2.5 3A1.5 1.5 0 0 0 1 4.5v.793c.026.009.051.02.076.032L7.674 8.51c.206.1.446.1.652 0l6.598-3.185A.755.755 0 0 1 15 5.293V4.5A1.5 1.5 0 0 0 13.5 3h-11Z" />
      <path d="M15 6.954 8.978 9.86a2.25 2.25 0 0 1-1.956 0L1 6.954V11.5A1.5 1.5 0 0 0 2.5 13h11a1.5 1.5 0 0 0 1.5-1.5V6.954Z" />
    </svg>
  </div>
</div>

Input with trailing icon

<div>
  <label for="account-number" class="block text-sm/6 font-medium text-gray-900">Account number</label>
  <div class="mt-2 grid grid-cols-1">
    <input type="text" name="account-number" id="account-number" class="col-start-1 row-start-1 block w-full rounded-md bg-white py-1.5 pl-3 pr-10 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:pr-9 sm:text-sm/6" placeholder="000-00-0000">
    <svg class="pointer-events-none col-start-1 row-start-1 mr-3 size-5 self-center justify-self-end text-gray-400 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
      <path fill-rule="evenodd" d="M15 8A7 7 0 1 1 1 8a7 7 0 0 1 14 0Zm-6 3.5a1 1 0 1 1-2 0 1 1 0 0 1 2 0ZM7.293 5.293a1 1 0 1 1 .99 1.667c-.459.134-1.033.566-1.033 1.29v.25a.75.75 0 1 0 1.5 0v-.115a2.5 2.5 0 1 0-2.518-4.153.75.75 0 1 0 1.061 1.06Z" clip-rule="evenodd" />
    </svg>
  </div>
</div>

Input with add-on

<div>
  <label for="company-website" class="block text-sm/6 font-medium text-gray-900">Company website</label>
  <div class="mt-2 flex">
    <div class="flex shrink-0 items-center rounded-l-md bg-white px-3 text-base text-gray-500 outline outline-1 -outline-offset-1 outline-gray-300 sm:text-sm/6">https://</div>
    <input type="text" name="company-website" id="company-website" class="-ml-px block w-full grow rounded-r-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="www.example.com">
  </div>
</div>

Input with inline leading and trailing add-ons

<div>
  <label for="price" class="block text-sm/6 font-medium text-gray-900">Price</label>
  <div class="mt-2">
    <div class="flex items-center rounded-md bg-white px-3 outline outline-1 -outline-offset-1 outline-gray-300 focus-within:outline focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600">
      <div class="shrink-0 select-none text-base text-gray-500 sm:text-sm/6">$</div>
      <input type="text" name="price" id="price" class="block min-w-0 grow py-1.5 pl-1 pr-3 text-base text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0 sm:text-sm/6" placeholder="0.00" aria-describedby="price-currency">
      <div id="price-currency" class="shrink-0 select-none text-base text-gray-500 sm:text-sm/6">USD</div>
    </div>
  </div>
</div>

Input with inline leading add-on and trailing dropdown

<div>
  <label for="price" class="block text-sm/6 font-medium text-gray-900">Price</label>
  <div class="mt-2">
    <div class="flex items-center rounded-md bg-white pl-3 outline outline-1 -outline-offset-1 outline-gray-300 has-[input:focus-within]:outline has-[input:focus-within]:outline-2 has-[input:focus-within]:-outline-offset-2 has-[input:focus-within]:outline-indigo-600">
      <div class="shrink-0 select-none text-base text-gray-500 sm:text-sm/6">$</div>
      <input type="text" name="price" id="price" class="block min-w-0 grow py-1.5 pl-1 pr-3 text-base text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0 sm:text-sm/6" placeholder="0.00">
      <div class="grid shrink-0 grid-cols-1 focus-within:relative">
        <select id="currency" name="currency" aria-label="Currency" class="col-start-1 row-start-1 w-full appearance-none rounded-md py-1.5 pl-3 pr-7 text-base text-gray-500 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
          <option>USD</option>
          <option>CAD</option>
          <option>EUR</option>
        </select>
        <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
        </svg>
      </div>
    </div>
  </div>
</div>

Input with leading icon and trailing button

<div>
  <label for="query" class="block text-sm/6 font-medium text-gray-900">Search candidates</label>
  <div class="mt-2 flex">
    <div class="-mr-px grid grow grid-cols-1 focus-within:relative">
      <input type="text" name="query" id="query" class="col-start-1 row-start-1 block w-full rounded-l-md bg-white py-1.5 pl-10 pr-3 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:pl-9 sm:text-sm/6" placeholder="John Smith">
      <svg class="pointer-events-none col-start-1 row-start-1 ml-3 size-5 self-center text-gray-400 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path d="M8.5 4.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10.9 12.006c.11.542-.348.994-.9.994H2c-.553 0-1.01-.452-.902-.994a5.002 5.002 0 0 1 9.803 0ZM14.002 12h-1.59a2.556 2.556 0 0 0-.04-.29 6.476 6.476 0 0 0-1.167-2.603 3.002 3.002 0 0 1 3.633 1.911c.18.522-.283.982-.836.982ZM12 8a2 2 0 1 0 0-4 2 2 0 0 0 0 4Z" />
      </svg>
    </div>
    <button type="button" class="flex shrink-0 items-center gap-x-1.5 rounded-r-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 hover:bg-gray-50 focus:relative focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600">
      <svg class="-ml-0.5 size-4 text-gray-400" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path fill-rule="evenodd" d="M2 2.75A.75.75 0 0 1 2.75 2h9.5a.75.75 0 0 1 0 1.5h-9.5A.75.75 0 0 1 2 2.75ZM2 6.25a.75.75 0 0 1 .75-.75h5.5a.75.75 0 0 1 0 1.5h-5.5A.75.75 0 0 1 2 6.25Zm0 3.5A.75.75 0 0 1 2.75 9h3.5a.75.75 0 0 1 0 1.5h-3.5A.75.75 0 0 1 2 9.75ZM9.22 9.53a.75.75 0 0 1 0-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1-1.06 1.06l-.97-.97v5.69a.75.75 0 0 1-1.5 0V8.56l-.97.97a.75.75 0 0 1-1.06 0Z" clip-rule="evenodd" />
      </svg>
      Sort
    </button>
  </div>
</div>

Input with inset label

<div class="rounded-md bg-white px-3 pb-1.5 pt-2.5 outline outline-1 -outline-offset-1 outline-gray-300 focus-within:outline focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600">
  <label for="name" class="block text-xs font-medium text-gray-900">Name</label>
  <input type="text" name="name" id="name" class="block w-full text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0 sm:text-sm/6" placeholder="Jane Smith">
</div>

Input with overlapping label

<div class="relative">
  <label for="name" class="absolute -top-2 left-2 inline-block rounded-lg bg-white px-1 text-xs font-medium text-gray-900">Name</label>
  <input type="text" name="name" id="name" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="Jane Smith">
</div>

Input with gray background and bottom border

<div>
  <label for="name" class="block text-sm/6 font-medium text-gray-900">Name</label>
  <div class="relative mt-2">
    <input type="text" name="name" id="name" class="peer block w-full bg-gray-50 px-3 py-1.5 text-gray-900 placeholder:text-gray-500 focus:outline focus:outline-0 sm:text-sm/6" placeholder="Jane Smith">
    <div class="absolute inset-x-0 bottom-0 border-t border-gray-300 peer-focus:border-t-2 peer-focus:border-indigo-600" aria-hidden="true"></div>
  </div>
</div>

Input with keyboard shortcut

<div>
  <label for="search" class="block text-sm/6 font-medium text-gray-900">Quick search</label>
  <div class="mt-2">
    <div class="flex rounded-md bg-white outline outline-1 -outline-offset-1 outline-gray-300 focus-within:outline focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600">
      <input type="text" name="search" id="search" class="block min-w-0 grow px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0 sm:text-sm/6">
      <div class="flex py-1.5 pr-1.5">
        <kbd class="inline-flex items-center rounded border border-gray-200 px-1 font-sans text-xs text-gray-400">⌘K</kbd>
      </div>
    </div>
  </div>
</div>

Select Menus

Simple native

<div>
  <label for="location" class="block text-sm/6 font-medium text-gray-900">Location</label>
  <div class="mt-2 grid grid-cols-1">
    <select id="location" name="location" class="col-start-1 row-start-1 w-full appearance-none rounded-md bg-white py-1.5 pl-3 pr-8 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6">
      <option>United States</option>
      <option selected>Canada</option>
      <option>Mexico</option>
    </select>
    <svg class="pointer-events-none col-start-1 row-start-1 mr-2 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
      <path fill-rule="evenodd" d="M4.22 6.22a.75.75 0 0 1 1.06 0L8 8.94l2.72-2.72a.75.75 0 1 1 1.06 1.06l-3.25 3.25a.75.75 0 0 1-1.06 0L4.22 7.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
    </svg>
  </div>
</div>

Simple custom

<div>
  <label id="listbox-label" class="block text-sm/6 font-medium text-gray-900">Assigned to</label>
  <div class="relative mt-2">
    <button type="button" class="grid w-full cursor-default grid-cols-1 rounded-md bg-white py-1.5 pl-3 pr-2 text-left text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
      <span class="col-start-1 row-start-1 truncate pr-6">Tom Cook</span>
      <svg class="col-start-1 row-start-1 size-5 self-center justify-self-end text-gray-500 sm:size-4" viewBox="0 0 16 16" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path fill-rule="evenodd" d="M5.22 10.22a.75.75 0 0 1 1.06 0L8 11.94l1.72-1.72a.75.75 0 1 1 1.06 1.06l-2.25 2.25a.75.75 0 0 1-1.06 0l-2.25-2.25a.75.75 0 0 1 0-1.06ZM10.78 5.78a.75.75 0 0 1-1.06 0L8 4.06 6.28 5.78a.75.75 0 0 1-1.06-1.06l2.25-2.25a.75.75 0 0 1 1.06 0l2.25 2.25a.75.75 0 0 1 0 1.06Z" clip-rule="evenodd" />
      </svg>
    </button>
 
    <!--
      Select popover, show/hide based on select state.
 
      Entering: ""
        From: ""
        To: ""
      Leaving: "transition ease-in duration-100"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <ul class="absolute z-10 mt-1 max-h-60 w-full overflow-auto rounded-md bg-white py-1 text-base shadow-lg ring-1 ring-black/5 focus:outline-none sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-3">
      <!--
        Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
        Highlighted: "bg-indigo-600 text-white outline-none", Not Highlighted: "text-gray-900"
      -->
      <li class="relative cursor-default select-none py-2 pl-3 pr-9 text-gray-900" id="listbox-option-0" role="option">
        <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
        <span class="block truncate font-normal">Wade Cooper</span>
 
        <!--
          Checkmark, only display for selected option.
 
          Highlighted: "text-white", Not Highlighted: "text-indigo-600"
        -->
        <span class="absolute inset-y-0 right-0 flex items-center pr-4 text-indigo-600">
          <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
            <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
          </svg>
        </span>
      </li>
 
      <!-- More items... -->
    </ul>
  </div>
</div>

Branded with supported text

<div>
  <label id="listbox-label" class="sr-only">Change published status</label>
  <div class="relative">
    <div class="inline-flex divide-x divide-indigo-700 rounded-md outline-none">
      <div class="inline-flex items-center gap-x-1.5 rounded-l-md bg-indigo-600 px-3 py-2 text-white">
        <svg class="-ml-0.5 size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
        </svg>
        <p class="text-sm font-semibold">Published</p>
      </div>
      <button type="button" class="inline-flex items-center rounded-l-none rounded-r-md bg-indigo-600 p-2 outline-none hover:bg-indigo-700 focus-visible:outline focus-visible:outline-2 focus-visible:outline-indigo-400" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
        <span class="sr-only">Change published status</span>
        <svg class="size-5 text-white forced-colors:text-[Highlight]" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
          <path fill-rule="evenodd" d="M5.22 8.22a.75.75 0 0 1 1.06 0L10 11.94l3.72-3.72a.75.75 0 1 1 1.06 1.06l-4.25 4.25a.75.75 0 0 1-1.06 0L5.22 9.28a.75.75 0 0 1 0-1.06Z" clip-rule="evenodd" />
        </svg>
      </button>
    </div>
 
    <!--
      Select popover, show/hide based on select state.
 
      Entering: ""
        From: ""
        To: ""
      Leaving: "transition ease-in duration-100"
        From: "opacity-100"
        To: "opacity-0"
    -->
    <ul class="absolute right-0 z-10 mt-2 w-72 origin-top-right divide-y divide-gray-200 overflow-hidden rounded-md bg-white shadow-lg ring-1 ring-black/5 focus:outline-none" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-0">
      <!--
        Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
        Highlighted: "bg-indigo-600 text-white", Not Highlighted: "text-gray-900"
      -->
      <li class="cursor-default select-none p-4 text-sm text-gray-900" id="listbox-option-0" role="option">
        <div class="flex flex-col">
          <div class="flex justify-between">
            <!-- Selected: "font-semibold", Not Selected: "font-normal" -->
            <p class="font-normal">Published</p>
            <!--
              Checkmark, only display for selected option.
 
              Highlighted: "text-white", Not Highlighted: "text-indigo-600"
            -->
            <span class="text-indigo-600">
              <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                <path fill-rule="evenodd" d="M16.704 4.153a.75.75 0 0 1 .143 1.052l-8 10.5a.75.75 0 0 1-1.127.075l-4.5-4.5a.75.75 0 0 1 1.06-1.06l3.894 3.893 7.48-9.817a.75.75 0 0 1 1.05-.143Z" clip-rule="evenodd" />
              </svg>
            </span>
          </div>
          <!-- Highlighted: "text-indigo-200", Not Highlighted: "text-gray-500" -->
          <p class="mt-2 text-gray-500">This job posting can be viewed by anyone who has the link.</p>
        </div>
      </li>
 
      <!-- More items... -->
    </ul>
  </div>
</div>

Teaxareas

Simple

<div>
  <label for="comment" class="block text-sm/6 font-medium text-gray-900">Add your comment</label>
  <div class="mt-2">
    <textarea rows="4" name="comment" id="comment" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6"></textarea>
  </div>
</div>

With underline and actions

<div class="flex items-start space-x-4">
  <div class="shrink-0">
    <img class="inline-block size-10 rounded-full" src="https://images.unsplash.com/photo-1550525811-e5869dd03032?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="">
  </div>
  <div class="min-w-0 flex-1">
    <form action="#">
      <div class="border-b border-gray-200 pb-px focus-within:border-b-2 focus-within:border-indigo-600 focus-within:pb-0">
        <label for="comment" class="sr-only">Add your comment</label>
        <textarea rows="3" name="comment" id="comment" class="block w-full resize-none text-base text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0 sm:text-sm/6" placeholder="Add your comment..."></textarea>
      </div>
      <div class="flex justify-between pt-2">
        <div class="flex items-center space-x-5">
          <div class="flow-root">
            <button type="button" class="-m-2 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
              <svg class="size-6" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                <path stroke-linecap="round" stroke-linejoin="round" d="m18.375 12.739-7.693 7.693a4.5 4.5 0 0 1-6.364-6.364l10.94-10.94A3 3 0 1 1 19.5 7.372L8.552 18.32m.009-.01-.01.01m5.699-9.941-7.81 7.81a1.5 1.5 0 0 0 2.112 2.13" />
              </svg>
              <span class="sr-only">Attach a file</span>
            </button>
          </div>
          <div class="flow-root">
            <div>
              <label id="listbox-label" class="sr-only">Your mood</label>
              <div class="relative">
                <button type="button" class="relative -m-2 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
                  <span class="flex items-center justify-center">
                    <!-- Placeholder label, show/hide based on listbox state. -->
                    <span>
                      <svg class="size-6 shrink-0" fill="none" viewBox="0 0 24 24" stroke-width="1.5" stroke="currentColor" aria-hidden="true" data-slot="icon">
                        <path stroke-linecap="round" stroke-linejoin="round" d="M15.182 15.182a4.5 4.5 0 0 1-6.364 0M21 12a9 9 0 1 1-18 0 9 9 0 0 1 18 0ZM9.75 9.75c0 .414-.168.75-.375.75S9 10.164 9 9.75 9.168 9 9.375 9s.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Zm5.625 0c0 .414-.168.75-.375.75s-.375-.336-.375-.75.168-.75.375-.75.375.336.375.75Zm-.375 0h.008v.015h-.008V9.75Z" />
                      </svg>
                      <span class="sr-only">Add your mood</span>
                    </span>
                    <!-- Selected item label, show/hide based on listbox state. -->
                    <span>
                      <span class="flex size-8 items-center justify-center rounded-full bg-red-500">
                        <svg class="size-5 shrink-0 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path fill-rule="evenodd" d="M13.5 4.938a7 7 0 1 1-9.006 1.737c.202-.257.59-.218.793.039.278.352.594.672.943.954.332.269.786-.049.773-.476a5.977 5.977 0 0 1 .572-2.759 6.026 6.026 0 0 1 2.486-2.665c.247-.14.55-.016.677.238A6.967 6.967 0 0 0 13.5 4.938ZM14 12a4 4 0 0 1-4 4c-1.913 0-3.52-1.398-3.91-3.182-.093-.429.44-.643.814-.413a4.043 4.043 0 0 0 1.601.564c.303.038.531-.24.51-.544a5.975 5.975 0 0 1 1.315-4.192.447.447 0 0 1 .431-.16A4.001 4.001 0 0 1 14 12Z" clip-rule="evenodd" />
                        </svg>
                      </span>
                      <span class="sr-only">Excited</span>
                    </span>
                  </span>
                </button>
 
                <!--
                  Select popover, show/hide based on select state.
 
                  Entering: ""
                    From: ""
                    To: ""
                  Leaving: "transition ease-in duration-100"
                    From: "opacity-100"
                    To: "opacity-0"
                -->
                <ul class="absolute z-10 -ml-6 w-60 rounded-lg bg-white py-3 text-base shadow outline outline-1 outline-black/5 sm:ml-auto sm:w-64 sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-5">
                  <!--
                    Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
                    Highlighted: "relative outline-none bg-gray-100", Not Highlighted: "bg-white"
                  -->
                  <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-0" role="option">
                    <div class="flex items-center">
                      <div class="flex size-8 items-center justify-center rounded-full bg-red-500">
                        <svg class="size-5 shrink-0 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path fill-rule="evenodd" d="M13.5 4.938a7 7 0 1 1-9.006 1.737c.202-.257.59-.218.793.039.278.352.594.672.943.954.332.269.786-.049.773-.476a5.977 5.977 0 0 1 .572-2.759 6.026 6.026 0 0 1 2.486-2.665c.247-.14.55-.016.677.238A6.967 6.967 0 0 0 13.5 4.938ZM14 12a4 4 0 0 1-4 4c-1.913 0-3.52-1.398-3.91-3.182-.093-.429.44-.643.814-.413a4.043 4.043 0 0 0 1.601.564c.303.038.531-.24.51-.544a5.975 5.975 0 0 1 1.315-4.192.447.447 0 0 1 .431-.16A4.001 4.001 0 0 1 14 12Z" clip-rule="evenodd" />
                        </svg>
                      </div>
                      <span class="ml-3 block truncate font-medium">Excited</span>
                    </div>
                  </li>
                  <!--
                    Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
                    Highlighted: "relative outline-none bg-gray-100", Not Highlighted: "bg-white"
                  -->
                  <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-1" role="option">
                    <div class="flex items-center">
                      <div class="flex size-8 items-center justify-center rounded-full bg-pink-400">
                        <svg class="size-5 shrink-0 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path d="m9.653 16.915-.005-.003-.019-.01a20.759 20.759 0 0 1-1.162-.682 22.045 22.045 0 0 1-2.582-1.9C4.045 12.733 2 10.352 2 7.5a4.5 4.5 0 0 1 8-2.828A4.5 4.5 0 0 1 18 7.5c0 2.852-2.044 5.233-3.885 6.82a22.049 22.049 0 0 1-3.744 2.582l-.019.01-.005.003h-.002a.739.739 0 0 1-.69.001l-.002-.001Z" />
                        </svg>
                      </div>
                      <span class="ml-3 block truncate font-medium">Loved</span>
                    </div>
                  </li>
                  <!--
                    Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
                    Highlighted: "relative outline-none bg-gray-100", Not Highlighted: "bg-white"
                  -->
                  <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-2" role="option">
                    <div class="flex items-center">
                      <div class="flex size-8 items-center justify-center rounded-full bg-green-400">
                        <svg class="size-5 shrink-0 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.536-4.464a.75.75 0 1 0-1.061-1.061 3.5 3.5 0 0 1-4.95 0 .75.75 0 0 0-1.06 1.06 5 5 0 0 0 7.07 0ZM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5Zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5Z" clip-rule="evenodd" />
                        </svg>
                      </div>
                      <span class="ml-3 block truncate font-medium">Happy</span>
                    </div>
                  </li>
                  <!--
                    Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
                    Highlighted: "relative outline-none bg-gray-100", Not Highlighted: "bg-white"
                  -->
                  <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-3" role="option">
                    <div class="flex items-center">
                      <div class="flex size-8 items-center justify-center rounded-full bg-yellow-400">
                        <svg class="size-5 shrink-0 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm-3.536-3.475a.75.75 0 0 0 1.061 0 3.5 3.5 0 0 1 4.95 0 .75.75 0 1 0 1.06-1.06 5 5 0 0 0-7.07 0 .75.75 0 0 0 0 1.06ZM9 8.5c0 .828-.448 1.5-1 1.5s-1-.672-1-1.5S7.448 7 8 7s1 .672 1 1.5Zm3 1.5c.552 0 1-.672 1-1.5S12.552 7 12 7s-1 .672-1 1.5.448 1.5 1 1.5Z" clip-rule="evenodd" />
                        </svg>
                      </div>
                      <span class="ml-3 block truncate font-medium">Sad</span>
                    </div>
                  </li>
                  <!--
                    Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
                    Highlighted: "relative outline-none bg-gray-100", Not Highlighted: "bg-white"
                  -->
                  <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-4" role="option">
                    <div class="flex items-center">
                      <div class="flex size-8 items-center justify-center rounded-full bg-blue-500">
                        <svg class="size-5 shrink-0 text-white" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path d="M1 8.25a1.25 1.25 0 1 1 2.5 0v7.5a1.25 1.25 0 1 1-2.5 0v-7.5ZM11 3V1.7c0-.268.14-.526.395-.607A2 2 0 0 1 14 3c0 .995-.182 1.948-.514 2.826-.204.54.166 1.174.744 1.174h2.52c1.243 0 2.261 1.01 2.146 2.247a23.864 23.864 0 0 1-1.341 5.974C17.153 16.323 16.072 17 14.9 17h-3.192a3 3 0 0 1-1.341-.317l-2.734-1.366A3 3 0 0 0 6.292 15H5V8h.963c.685 0 1.258-.483 1.612-1.068a4.011 4.011 0 0 1 2.166-1.73c.432-.143.853-.386 1.011-.814.16-.432.248-.9.248-1.388Z" />
                        </svg>
                      </div>
                      <span class="ml-3 block truncate font-medium">Thumbsy</span>
                    </div>
                  </li>
                  <!--
                    Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
                    Highlighted: "relative outline-none bg-gray-100", Not Highlighted: "bg-white"
                  -->
                  <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-5" role="option">
                    <div class="flex items-center">
                      <div class="flex size-8 items-center justify-center rounded-full bg-transparent">
                        <svg class="size-5 shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                          <path d="M6.28 5.22a.75.75 0 0 0-1.06 1.06L8.94 10l-3.72 3.72a.75.75 0 1 0 1.06 1.06L10 11.06l3.72 3.72a.75.75 0 1 0 1.06-1.06L11.06 10l3.72-3.72a.75.75 0 0 0-1.06-1.06L10 8.94 6.28 5.22Z" />
                        </svg>
                      </div>
                      <span class="ml-3 block truncate font-medium">I feel nothing</span>
                    </div>
                  </li>
                </ul>
              </div>
            </div>
          </div>
        </div>
        <div class="shrink-0">
          <button type="submit" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Post</button>
        </div>
      </div>
    </form>
  </div>
</div>

With title and pill actions

<form action="#" class="relative">
  <div class="rounded-lg bg-white outline outline-1 -outline-offset-1 outline-gray-300 focus-within:outline focus-within:outline-2 focus-within:-outline-offset-2 focus-within:outline-indigo-600">
    <label for="title" class="sr-only">Title</label>
    <input type="text" name="title" id="title" class="block w-full px-3 pt-2.5 text-lg font-medium text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0" placeholder="Title">
    <label for="description" class="sr-only">Description</label>
    <textarea rows="2" name="description" id="description" class="block w-full resize-none px-3 py-1.5 text-base text-gray-900 placeholder:text-gray-400 focus:outline focus:outline-0 sm:text-sm/6" placeholder="Write a description..."></textarea>
 
    <!-- Spacer element to match the height of the toolbar -->
    <div aria-hidden="true">
      <div class="py-2">
        <div class="h-9"></div>
      </div>
      <div class="h-px"></div>
      <div class="py-2">
        <div class="py-px">
          <div class="h-9"></div>
        </div>
      </div>
    </div>
  </div>
 
  <div class="absolute inset-x-px bottom-0">
    <!-- Actions: These are just examples to demonstrate the concept, replace/wire these up however makes sense for your project. -->
    <div class="flex flex-nowrap justify-end space-x-2 px-2 py-2 sm:px-3">
      <div class="shrink-0">
        <label id="listbox-label" class="sr-only">Assign</label>
        <div class="relative">
          <button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
            <!-- Placeholder icon, show/hide based on listbox state. -->
            <svg class="size-5 shrink-0 text-gray-300 sm:-ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />
            </svg>
 
            <!-- Selected user avatar, show/hide based on listbox state. -->
            <img src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-5 shrink-0 rounded-full">
 
            <!-- Selected: "text-gray-900" -->
            <span class="hidden truncate sm:ml-2 sm:block">Assign</span>
          </button>
 
          <!--
            Select popover, show/hide based on select state.
 
            Entering: ""
              From: ""
              To: ""
            Leaving: "transition ease-in duration-100"
              From: "opacity-100"
              To: "opacity-0"
          -->
          <ul class="absolute right-0 z-10 mt-1 max-h-56 w-52 overflow-auto rounded-lg bg-white py-3 text-base shadow outline outline-1 outline-black/5 sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-0">
            <!--
              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
              Highlighted: "bg-gray-100 relative hover:outline-none", Not Highlighted: "bg-white"
            -->
            <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-0" role="option">
              <div class="flex items-center">
                <svg class="size-5 shrink-0 text-gray-400" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
                  <path fill-rule="evenodd" d="M18 10a8 8 0 1 1-16 0 8 8 0 0 1 16 0Zm-5.5-2.5a2.5 2.5 0 1 1-5 0 2.5 2.5 0 0 1 5 0ZM10 12a5.99 5.99 0 0 0-4.793 2.39A6.483 6.483 0 0 0 10 16.5a6.483 6.483 0 0 0 4.793-2.11A5.99 5.99 0 0 0 10 12Z" clip-rule="evenodd" />
                </svg>
                <span class="ml-3 block truncate font-medium">Unassigned</span>
              </div>
            </li>
            <!--
              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
              Highlighted: "bg-gray-100 relative hover:outline-none", Not Highlighted: "bg-white"
            -->
            <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-1" role="option">
              <div class="flex items-center">
                <img src="https://images.unsplash.com/photo-1491528323818-fdd1faba62cc?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt="" class="size-5 shrink-0 rounded-full">
                <span class="ml-3 block truncate font-medium">Wade Cooper</span>
              </div>
            </li>
 
            <!-- More items... -->
          </ul>
        </div>
      </div>
 
      <div class="shrink-0">
        <label id="listbox-label" class="sr-only">Add a label</label>
        <div class="relative">
          <button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
            <!-- Selected: "text-gray-300", Default: "text-gray-500" -->
            <svg class="size-5 shrink-0 text-gray-300 sm:-ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path fill-rule="evenodd" d="M4.5 2A2.5 2.5 0 0 0 2 4.5v3.879a2.5 2.5 0 0 0 .732 1.767l7.5 7.5a2.5 2.5 0 0 0 3.536 0l3.878-3.878a2.5 2.5 0 0 0 0-3.536l-7.5-7.5A2.5 2.5 0 0 0 8.38 2H4.5ZM5 6a1 1 0 1 0 0-2 1 1 0 0 0 0 2Z" clip-rule="evenodd" />
            </svg>
            <!-- Selected: "text-gray-900" -->
            <span class="hidden truncate sm:ml-2 sm:block">Label</span>
          </button>
 
          <!--
            Select popover, show/hide based on select state.
 
            Entering: ""
              From: ""
              To: ""
            Leaving: "transition ease-in duration-100"
              From: "opacity-100"
              To: "opacity-0"
          -->
          <ul class="absolute right-0 z-10 mt-1 max-h-56 w-52 overflow-auto rounded-lg bg-white py-3 text-base shadow outline outline-1 outline-black/5 sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-0">
            <!--
              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
              Highlighted: "bg-gray-100 relative hover:outline-none", Not Highlighted: "bg-white"
            -->
            <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-0" role="option">
              <div class="flex items-center">
                <span class="block truncate font-medium">Unlabelled</span>
              </div>
            </li>
            <!--
              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
              Highlighted: "bg-gray-100 relative hover:outline-none", Not Highlighted: "bg-white"
            -->
            <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-1" role="option">
              <div class="flex items-center">
                <span class="block truncate font-medium">Engineering</span>
              </div>
            </li>
 
            <!-- More items... -->
          </ul>
        </div>
      </div>
 
      <div class="shrink-0">
        <label id="listbox-label" class="sr-only">Add a due date</label>
        <div class="relative">
          <button type="button" class="relative inline-flex items-center whitespace-nowrap rounded-full bg-gray-50 px-2 py-2 text-sm font-medium text-gray-500 hover:bg-gray-100 sm:px-3" aria-haspopup="listbox" aria-expanded="true" aria-labelledby="listbox-label">
            <!-- Selected: "text-gray-300", Default: "text-gray-500" -->
            <svg class="size-5 shrink-0 text-gray-300 sm:-ml-1" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path fill-rule="evenodd" d="M5.75 2a.75.75 0 0 1 .75.75V4h7V2.75a.75.75 0 0 1 1.5 0V4h.25A2.75 2.75 0 0 1 18 6.75v8.5A2.75 2.75 0 0 1 15.25 18H4.75A2.75 2.75 0 0 1 2 15.25v-8.5A2.75 2.75 0 0 1 4.75 4H5V2.75A.75.75 0 0 1 5.75 2Zm-1 5.5c-.69 0-1.25.56-1.25 1.25v6.5c0 .69.56 1.25 1.25 1.25h10.5c.69 0 1.25-.56 1.25-1.25v-6.5c0-.69-.56-1.25-1.25-1.25H4.75Z" clip-rule="evenodd" />
            </svg>
            <!-- Selected: "text-gray-900" -->
            <span class="hidden truncate sm:ml-2 sm:block">Due date</span>
          </button>
 
          <!--
            Select popover, show/hide based on select state.
 
            Entering: ""
              From: ""
              To: ""
            Leaving: "transition ease-in duration-100"
              From: "opacity-100"
              To: "opacity-0"
          -->
          <ul class="absolute right-0 z-10 mt-1 max-h-56 w-52 overflow-auto rounded-lg bg-white py-3 text-base shadow outline outline-1 outline-black/5 sm:text-sm" tabindex="-1" role="listbox" aria-labelledby="listbox-label" aria-activedescendant="listbox-option-0">
            <!--
              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
              Highlighted: "bg-gray-100 relative hover:outline-none", Not Highlighted: "bg-white"
            -->
            <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-0" role="option">
              <div class="flex items-center">
                <span class="block truncate font-medium">No due date</span>
              </div>
            </li>
            <!--
              Select option, manage highlight styles based on mouseenter/mouseleave and keyboard navigation.
 
              Highlighted: "bg-gray-100 relative hover:outline-none", Not Highlighted: "bg-white"
            -->
            <li class="cursor-default select-none bg-white px-3 py-2" id="listbox-option-1" role="option">
              <div class="flex items-center">
                <span class="block truncate font-medium">Today</span>
              </div>
            </li>
 
            <!-- More items... -->
          </ul>
        </div>
      </div>
    </div>
    <div class="flex items-center justify-between space-x-3 border-t border-gray-200 px-2 py-2 sm:px-3">
      <div class="flex">
        <button type="button" class="group -my-2 -ml-2 inline-flex items-center rounded-full px-3 py-2 text-left text-gray-400">
          <svg class="-ml-1 mr-2 size-5 group-hover:text-gray-500" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
            <path fill-rule="evenodd" d="M15.621 4.379a3 3 0 0 0-4.242 0l-7 7a3 3 0 0 0 4.241 4.243h.001l.497-.5a.75.75 0 0 1 1.064 1.057l-.498.501-.002.002a4.5 4.5 0 0 1-6.364-6.364l7-7a4.5 4.5 0 0 1 6.368 6.36l-3.455 3.553A2.625 2.625 0 1 1 9.52 9.52l3.45-3.451a.75.75 0 1 1 1.061 1.06l-3.45 3.451a1.125 1.125 0 0 0 1.587 1.595l3.454-3.553a3 3 0 0 0 0-4.242Z" clip-rule="evenodd" />
          </svg>
          <span class="text-sm italic text-gray-500 group-hover:text-gray-600">Attach a file</span>
        </button>
      </div>
      <div class="shrink-0">
        <button type="submit" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Create</button>
      </div>
    </div>
  </div>
</form>

With preview button

<form action="#">
  <div>
    <div class="group flex items-center" aria-orientation="horizontal" role="tablist">
      <!-- Selected: "bg-gray-100 text-gray-900 hover:bg-gray-200", Not Selected: "bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-900" -->
      <button id="tabs-1-tab-1" class="rounded-md border border-transparent bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900" aria-controls="tabs-1-panel-1" role="tab" type="button">Write</button>
      <!-- Selected: "bg-gray-100 text-gray-900 hover:bg-gray-200", Not Selected: "bg-white text-gray-500 hover:bg-gray-100 hover:text-gray-900" -->
      <button id="tabs-1-tab-2" class="ml-2 rounded-md border border-transparent bg-white px-3 py-1.5 text-sm font-medium text-gray-500 hover:bg-gray-100 hover:text-gray-900" aria-controls="tabs-1-panel-2" role="tab" type="button">Preview</button>
 
      <!-- These buttons are here simply as examples and don't actually do anything. -->
      <div class="ml-auto hidden items-center space-x-5 group-has-[*:first-child[aria-selected='true']]:flex">
        <div class="flex items-center">
          <button type="button" class="-m-2.5 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
            <span class="sr-only">Insert link</span>
            <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path d="M12.232 4.232a2.5 2.5 0 0 1 3.536 3.536l-1.225 1.224a.75.75 0 0 0 1.061 1.06l1.224-1.224a4 4 0 0 0-5.656-5.656l-3 3a4 4 0 0 0 .225 5.865.75.75 0 0 0 .977-1.138 2.5 2.5 0 0 1-.142-3.667l3-3Z" />
              <path d="M11.603 7.963a.75.75 0 0 0-.977 1.138 2.5 2.5 0 0 1 .142 3.667l-3 3a2.5 2.5 0 0 1-3.536-3.536l1.225-1.224a.75.75 0 0 0-1.061-1.06l-1.224 1.224a4 4 0 1 0 5.656 5.656l3-3a4 4 0 0 0-.225-5.865Z" />
            </svg>
          </button>
        </div>
        <div class="flex items-center">
          <button type="button" class="-m-2.5 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
            <span class="sr-only">Insert code</span>
            <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path fill-rule="evenodd" d="M6.28 5.22a.75.75 0 0 1 0 1.06L2.56 10l3.72 3.72a.75.75 0 0 1-1.06 1.06L.97 10.53a.75.75 0 0 1 0-1.06l4.25-4.25a.75.75 0 0 1 1.06 0Zm7.44 0a.75.75 0 0 1 1.06 0l4.25 4.25a.75.75 0 0 1 0 1.06l-4.25 4.25a.75.75 0 0 1-1.06-1.06L17.44 10l-3.72-3.72a.75.75 0 0 1 0-1.06ZM11.377 2.011a.75.75 0 0 1 .612.867l-2.5 14.5a.75.75 0 0 1-1.478-.255l2.5-14.5a.75.75 0 0 1 .866-.612Z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
        <div class="flex items-center">
          <button type="button" class="-m-2.5 inline-flex size-10 items-center justify-center rounded-full text-gray-400 hover:text-gray-500">
            <span class="sr-only">Mention someone</span>
            <svg class="size-5" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
              <path fill-rule="evenodd" d="M5.404 14.596A6.5 6.5 0 1 1 16.5 10a1.25 1.25 0 0 1-2.5 0 4 4 0 1 0-.571 2.06A2.75 2.75 0 0 0 18 10a8 8 0 1 0-2.343 5.657.75.75 0 0 0-1.06-1.06 6.5 6.5 0 0 1-9.193 0ZM10 7.5a2.5 2.5 0 1 0 0 5 2.5 2.5 0 0 0 0-5Z" clip-rule="evenodd" />
            </svg>
          </button>
        </div>
      </div>
    </div>
    <div class="mt-2">
      <div id="tabs-1-panel-1" class="-m-0.5 rounded-lg p-0.5" aria-labelledby="tabs-1-tab-1" role="tabpanel" tabindex="0">
        <label for="comment" class="sr-only">Comment</label>
        <div>
          <textarea rows="5" name="comment" id="comment" class="block w-full rounded-md bg-white px-3 py-1.5 text-base text-gray-900 outline outline-1 -outline-offset-1 outline-gray-300 placeholder:text-gray-400 focus:outline focus:outline-2 focus:-outline-offset-2 focus:outline-indigo-600 sm:text-sm/6" placeholder="Add your comment..."></textarea>
        </div>
      </div>
      <div id="tabs-1-panel-2" class="-m-0.5 rounded-lg p-0.5" aria-labelledby="tabs-1-tab-2" role="tabpanel" tabindex="0">
        <div class="border-b">
          <div class="mx-px mt-px px-3 pb-12 pt-2 text-sm text-gray-800">Preview content will render here.</div>
        </div>
      </div>
    </div>
  </div>
  <div class="mt-2 flex justify-end">
    <button type="submit" class="inline-flex items-center rounded-md bg-indigo-600 px-3 py-2 text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600">Post</button>
  </div>
</form>

Radio Groups

Simple list

<fieldset>
  <legend class="text-sm/6 font-semibold text-gray-900">Notifications</legend>
  <p class="mt-1 text-sm/6 text-gray-600">How do you prefer to receive notifications?</p>
  <div class="mt-6 space-y-6">
    <div class="flex items-center">
      <input id="email" name="notification-method" type="radio" checked class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <label for="email" class="ml-3 block text-sm/6 font-medium text-gray-900">Email</label>
    </div>
    <div class="flex items-center">
      <input id="sms" name="notification-method" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <label for="sms" class="ml-3 block text-sm/6 font-medium text-gray-900">Phone (SMS)</label>
    </div>
    <div class="flex items-center">
      <input id="push" name="notification-method" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <label for="push" class="ml-3 block text-sm/6 font-medium text-gray-900">Push notification</label>
    </div>
  </div>
</fieldset>

Simple inline list

<fieldset>
  <legend class="text-sm/6 font-semibold text-gray-900">Notifications</legend>
  <p class="mt-1 text-sm/6 text-gray-600">How do you prefer to receive notifications?</p>
  <div class="mt-6 space-y-6 sm:flex sm:items-center sm:space-x-10 sm:space-y-0">
    <div class="flex items-center">
      <input id="email" name="notification-method" type="radio" checked class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <label for="email" class="ml-3 block text-sm/6 font-medium text-gray-900">Email</label>
    </div>
    <div class="flex items-center">
      <input id="sms" name="notification-method" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <label for="sms" class="ml-3 block text-sm/6 font-medium text-gray-900">Phone (SMS)</label>
    </div>
    <div class="flex items-center">
      <input id="push" name="notification-method" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <label for="push" class="ml-3 block text-sm/6 font-medium text-gray-900">Push notification</label>
    </div>
  </div>
</fieldset>

List with inline description

<fieldset aria-label="Plan">
  <div class="space-y-5">
    <div class="relative flex items-start">
      <div class="flex h-6 items-center">
        <input id="small" aria-describedby="small-description" name="plan" type="radio" checked class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      </div>
      <div class="ml-3 text-sm/6">
        <label for="small" class="font-medium text-gray-900">Small</label>
        <span id="small-description" class="text-gray-500">4 GB RAM / 2 CPUS / 80 GB SSD Storage</span>
      </div>
    </div>
    <div class="relative flex items-start">
      <div class="flex h-6 items-center">
        <input id="medium" aria-describedby="medium-description" name="plan" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      </div>
      <div class="ml-3 text-sm/6">
        <label for="medium" class="font-medium text-gray-900">Medium</label>
        <span id="medium-description" class="text-gray-500">8 GB RAM / 4 CPUS / 160 GB SSD Storage</span>
      </div>
    </div>
    <div class="relative flex items-start">
      <div class="flex h-6 items-center">
        <input id="large" aria-describedby="large-description" name="plan" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      </div>
      <div class="ml-3 text-sm/6">
        <label for="large" class="font-medium text-gray-900">Large</label>
        <span id="large-description" class="text-gray-500">16 GB RAM / 8 CPUS / 320 GB SSD Storage</span>
      </div>
    </div>
  </div>
</fieldset>

Simple table

<fieldset aria-label="Pricing plans" class="relative -space-y-px rounded-md bg-white">
  <label aria-label="Startup" aria-description="$29 per month, $290 per year, Up to 5 active job postings" class="group flex cursor-pointer flex-col border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-indigo-200 has-[:checked]:bg-indigo-50 md:grid md:grid-cols-3 md:pl-4 md:pr-6">
    <span class="flex items-center gap-3 text-sm">
      <input name="pricing-plan" value="Startup" type="radio" checked class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <span class="font-medium text-gray-900 group-has-[:checked]:text-indigo-900">Startup</span>
    </span>
    <span class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
      <span class="font-medium text-gray-900 group-has-[:checked]:text-indigo-900">$29 / mo</span>
      <span class="text-gray-500 group-has-[:checked]:text-indigo-700">($290 / yr)</span>
    </span>
    <span class="ml-6 pl-1 text-sm text-gray-500 group-has-[:checked]:text-indigo-700 md:ml-0 md:pl-0 md:text-right">Up to 5 active job postings</span>
  </label>
  <label aria-label="Business" aria-description="$99 per month, $990 per year, Up to 25 active job postings" class="group flex cursor-pointer flex-col border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-indigo-200 has-[:checked]:bg-indigo-50 md:grid md:grid-cols-3 md:pl-4 md:pr-6">
    <span class="flex items-center gap-3 text-sm">
      <input name="pricing-plan" value="Business" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <span class="font-medium text-gray-900 group-has-[:checked]:text-indigo-900">Business</span>
    </span>
    <span class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
      <span class="font-medium text-gray-900 group-has-[:checked]:text-indigo-900">$99 / mo</span>
      <span class="text-gray-500 group-has-[:checked]:text-indigo-700">($990 / yr)</span>
    </span>
    <span class="ml-6 pl-1 text-sm text-gray-500 group-has-[:checked]:text-indigo-700 md:ml-0 md:pl-0 md:text-right">Up to 25 active job postings</span>
  </label>
  <label aria-label="Enterprise" aria-description="$249 per month, $2490 per year, Unlimited active job postings" class="group flex cursor-pointer flex-col border border-gray-200 p-4 first:rounded-tl-md first:rounded-tr-md last:rounded-bl-md last:rounded-br-md focus:outline-none has-[:checked]:relative has-[:checked]:border-indigo-200 has-[:checked]:bg-indigo-50 md:grid md:grid-cols-3 md:pl-4 md:pr-6">
    <span class="flex items-center gap-3 text-sm">
      <input name="pricing-plan" value="Enterprise" type="radio" class="relative size-4 appearance-none rounded-full border border-gray-300 bg-white before:absolute before:inset-1 before:rounded-full before:bg-white checked:border-indigo-600 checked:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:before:bg-gray-400 forced-colors:appearance-auto forced-colors:before:hidden [&:not(:checked)]:before:hidden">
      <span class="font-medium text-gray-900 group-has-[:checked]:text-indigo-900">Enterprise</span>
    </span>
    <span class="ml-6 pl-1 text-sm md:ml-0 md:pl-0 md:text-center">
      <span class="font-medium text-gray-900 group-has-[:checked]:text-indigo-900">$249 / mo</span>
      <span class="text-gray-500 group-has-[:checked]:text-indigo-700">($2490 / yr)</span>
    </span>
    <span class="ml-6 pl-1 text-sm text-gray-500 group-has-[:checked]:text-indigo-700 md:ml-0 md:pl-0 md:text-right">Unlimited active job postings</span>
  </label>
</fieldset>

Color picker

<fieldset>
  <legend class="block text-sm/6 font-semibold text-gray-900">Choose a label color</legend>
  <div class="mt-6 flex items-center gap-x-3">
    <!-- Active and Checked: "ring ring-offset-1" -->
    <label aria-label="Pink" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 text-pink-500 ring-current focus:outline-none">
      <input type="radio" name="color-choice" value="Pink" class="sr-only">
      <span aria-hidden="true" class="size-8 rounded-full border border-black/10 bg-current"></span>
    </label>
    <!-- Active and Checked: "ring ring-offset-1" -->
    <label aria-label="Purple" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 text-purple-500 ring-current focus:outline-none">
      <input type="radio" name="color-choice" value="Purple" class="sr-only">
      <span aria-hidden="true" class="size-8 rounded-full border border-black/10 bg-current"></span>
    </label>
    <!-- Active and Checked: "ring ring-offset-1" -->
    <label aria-label="Blue" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 text-blue-500 ring-current focus:outline-none">
      <input type="radio" name="color-choice" value="Blue" class="sr-only">
      <span aria-hidden="true" class="size-8 rounded-full border border-black/10 bg-current"></span>
    </label>
    <!-- Active and Checked: "ring ring-offset-1" -->
    <label aria-label="Green" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 text-green-500 ring-current focus:outline-none">
      <input type="radio" name="color-choice" value="Green" class="sr-only">
      <span aria-hidden="true" class="size-8 rounded-full border border-black/10 bg-current"></span>
    </label>
    <!-- Active and Checked: "ring ring-offset-1" -->
    <label aria-label="Yellow" class="relative -m-0.5 flex cursor-pointer items-center justify-center rounded-full p-0.5 text-yellow-500 ring-current focus:outline-none">
      <input type="radio" name="color-choice" value="Yellow" class="sr-only">
      <span aria-hidden="true" class="size-8 rounded-full border border-black/10 bg-current"></span>
    </label>
  </div>
</fieldset>

Cards

<fieldset>
  <legend class="text-sm/6 font-semibold text-gray-900">Select a mailing list</legend>
  <div class="mt-6 grid grid-cols-1 gap-y-6 sm:grid-cols-3 sm:gap-x-4">
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Newsletter" aria-description="Last message sent an hour ago to 621 users" class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none">
      <input type="radio" name="project-type" value="Newsletter" class="sr-only">
      <span class="flex flex-1">
        <span class="flex flex-col">
          <span class="block text-sm font-medium text-gray-900">Newsletter</span>
          <span class="mt-1 flex items-center text-sm text-gray-500">Last message sent an hour ago</span>
          <span class="mt-6 text-sm font-medium text-gray-900">621 users</span>
        </span>
      </span>
      <!-- Not Checked: "invisible" -->
      <svg class="size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
      </svg>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Existing customers" aria-description="Last message sent 2 weeks ago to 1200 users" class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none">
      <input type="radio" name="project-type" value="Existing customers" class="sr-only">
      <span class="flex flex-1">
        <span class="flex flex-col">
          <span class="block text-sm font-medium text-gray-900">Existing customers</span>
          <span class="mt-1 flex items-center text-sm text-gray-500">Last message sent 2 weeks ago</span>
          <span class="mt-6 text-sm font-medium text-gray-900">1200 users</span>
        </span>
      </span>
      <!-- Not Checked: "invisible" -->
      <svg class="size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
      </svg>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Trial users" aria-description="Last message sent 4 days ago to 2740 users" class="relative flex cursor-pointer rounded-lg border bg-white p-4 shadow-sm focus:outline-none">
      <input type="radio" name="project-type" value="Trial users" class="sr-only">
      <span class="flex flex-1">
        <span class="flex flex-col">
          <span class="block text-sm font-medium text-gray-900">Trial users</span>
          <span class="mt-1 flex items-center text-sm text-gray-500">Last message sent 4 days ago</span>
          <span class="mt-6 text-sm font-medium text-gray-900">2740 users</span>
        </span>
      </span>
      <!-- Not Checked: "invisible" -->
      <svg class="size-5 text-indigo-600" viewBox="0 0 20 20" fill="currentColor" aria-hidden="true" data-slot="icon">
        <path fill-rule="evenodd" d="M10 18a8 8 0 1 0 0-16 8 8 0 0 0 0 16Zm3.857-9.809a.75.75 0 0 0-1.214-.882l-3.483 4.79-1.88-1.88a.75.75 0 1 0-1.06 1.061l2.5 2.5a.75.75 0 0 0 1.137-.089l4-5.5Z" clip-rule="evenodd" />
      </svg>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
  </div>
</fieldset>

Small Cards

<fieldset aria-label="Choose a memory option">
  <div class="flex items-center justify-between">
    <div class="text-sm/6 font-medium text-gray-900">RAM</div>
    <a href="#" class="text-sm/6 font-medium text-indigo-600 hover:text-indigo-500">See performance specs</a>
  </div>
 
  <div class="mt-2 grid grid-cols-3 gap-3 sm:grid-cols-6">
    <!--
      In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
      Active: "ring-2 ring-indigo-600 ring-offset-2"
      Checked: "ring-0 bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
      Not Active and not Checked: "ring-inset"
      Active and Checked: "ring-2"
    -->
    <label class="flex cursor-pointer items-center justify-center rounded-md px-3 py-3 text-sm font-semibold uppercase focus:outline-none sm:flex-1">
      <input type="radio" name="memory-option" value="4 GB" class="sr-only">
      <span>4 GB</span>
    </label>
    <!--
      In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
      Active: "ring-2 ring-indigo-600 ring-offset-2"
      Checked: "ring-0 bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
      Not Active and not Checked: "ring-inset"
      Active and Checked: "ring-2"
    -->
    <label class="flex cursor-pointer items-center justify-center rounded-md px-3 py-3 text-sm font-semibold uppercase focus:outline-none sm:flex-1">
      <input type="radio" name="memory-option" value="8 GB" class="sr-only">
      <span>8 GB</span>
    </label>
    <!--
      In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
      Active: "ring-2 ring-indigo-600 ring-offset-2"
      Checked: "ring-0 bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
      Not Active and not Checked: "ring-inset"
      Active and Checked: "ring-2"
    -->
    <label class="flex cursor-pointer items-center justify-center rounded-md px-3 py-3 text-sm font-semibold uppercase focus:outline-none sm:flex-1">
      <input type="radio" name="memory-option" value="16 GB" class="sr-only">
      <span>16 GB</span>
    </label>
    <!--
      In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
      Active: "ring-2 ring-indigo-600 ring-offset-2"
      Checked: "ring-0 bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
      Not Active and not Checked: "ring-inset"
      Active and Checked: "ring-2"
    -->
    <label class="flex cursor-pointer items-center justify-center rounded-md px-3 py-3 text-sm font-semibold uppercase focus:outline-none sm:flex-1">
      <input type="radio" name="memory-option" value="32 GB" class="sr-only">
      <span>32 GB</span>
    </label>
    <!--
      In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
      Active: "ring-2 ring-indigo-600 ring-offset-2"
      Checked: "ring-0 bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
      Not Active and not Checked: "ring-inset"
      Active and Checked: "ring-2"
    -->
    <label class="flex cursor-pointer items-center justify-center rounded-md px-3 py-3 text-sm font-semibold uppercase focus:outline-none sm:flex-1">
      <input type="radio" name="memory-option" value="64 GB" class="sr-only">
      <span>64 GB</span>
    </label>
    <!--
      In Stock: "cursor-pointer", Out of Stock: "opacity-25 cursor-not-allowed"
      Active: "ring-2 ring-indigo-600 ring-offset-2"
      Checked: "ring-0 bg-indigo-600 text-white hover:bg-indigo-500", Not Checked: "ring-1 ring-gray-300 bg-white text-gray-900 hover:bg-gray-50"
      Not Active and not Checked: "ring-inset"
      Active and Checked: "ring-2"
    -->
    <label class="flex cursor-not-allowed items-center justify-center rounded-md px-3 py-3 text-sm font-semibold uppercase opacity-25 sm:flex-1">
      <input type="radio" name="memory-option" value="128 GB" disabled class="sr-only">
      <span>128 GB</span>
    </label>
  </div>
</fieldset>

Stacked cards

<fieldset aria-label="Server size">
  <div class="space-y-4">
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Hobby" aria-description="8GB, 4 CPUs, 160 GB SSD disk, $40 per month" class="relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between">
      <input type="radio" name="server-size" value="Hobby" class="sr-only">
      <span class="flex items-center">
        <span class="flex flex-col text-sm">
          <span class="font-medium text-gray-900">Hobby</span>
          <span class="text-gray-500">
            <span class="block sm:inline">8GB / 4 CPUs</span>
            <span class="hidden sm:mx-1 sm:inline" aria-hidden="true">&middot;</span>
            <span class="block sm:inline">160 GB SSD disk</span>
          </span>
        </span>
      </span>
      <span class="mt-2 flex text-sm sm:ml-4 sm:mt-0 sm:flex-col sm:text-right">
        <span class="font-medium text-gray-900">$40</span>
        <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
      </span>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Startup" aria-description="12GB, 6 CPUs, 256 GB SSD disk, $80 per month" class="relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between">
      <input type="radio" name="server-size" value="Startup" class="sr-only">
      <span class="flex items-center">
        <span class="flex flex-col text-sm">
          <span class="font-medium text-gray-900">Startup</span>
          <span class="text-gray-500">
            <span class="block sm:inline">12GB / 6 CPUs</span>
            <span class="hidden sm:mx-1 sm:inline" aria-hidden="true">&middot;</span>
            <span class="block sm:inline">256 GB SSD disk</span>
          </span>
        </span>
      </span>
      <span class="mt-2 flex text-sm sm:ml-4 sm:mt-0 sm:flex-col sm:text-right">
        <span class="font-medium text-gray-900">$80</span>
        <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
      </span>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Business" aria-description="16GB, 8 CPUs, 512 GB SSD disk, $160 per month" class="relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between">
      <input type="radio" name="server-size" value="Business" class="sr-only">
      <span class="flex items-center">
        <span class="flex flex-col text-sm">
          <span class="font-medium text-gray-900">Business</span>
          <span class="text-gray-500">
            <span class="block sm:inline">16GB / 8 CPUs</span>
            <span class="hidden sm:mx-1 sm:inline" aria-hidden="true">&middot;</span>
            <span class="block sm:inline">512 GB SSD disk</span>
          </span>
        </span>
      </span>
      <span class="mt-2 flex text-sm sm:ml-4 sm:mt-0 sm:flex-col sm:text-right">
        <span class="font-medium text-gray-900">$160</span>
        <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
      </span>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
    <!-- Active: "border-indigo-600 ring-2 ring-indigo-600", Not Active: "border-gray-300" -->
    <label aria-label="Enterprise" aria-description="32GB, 12 CPUs, 1024 GB SSD disk, $240 per month" class="relative block cursor-pointer rounded-lg border bg-white px-6 py-4 shadow-sm focus:outline-none sm:flex sm:justify-between">
      <input type="radio" name="server-size" value="Enterprise" class="sr-only">
      <span class="flex items-center">
        <span class="flex flex-col text-sm">
          <span class="font-medium text-gray-900">Enterprise</span>
          <span class="text-gray-500">
            <span class="block sm:inline">32GB / 12 CPUs</span>
            <span class="hidden sm:mx-1 sm:inline" aria-hidden="true">&middot;</span>
            <span class="block sm:inline">1024 GB SSD disk</span>
          </span>
        </span>
      </span>
      <span class="mt-2 flex text-sm sm:ml-4 sm:mt-0 sm:flex-col sm:text-right">
        <span class="font-medium text-gray-900">$240</span>
        <span class="ml-1 text-gray-500 sm:ml-0">/mo</span>
      </span>
      <!--
        Active: "border", Not Active: "border-2"
        Checked: "border-indigo-600", Not Checked: "border-transparent"
      -->
      <span class="pointer-events-none absolute -inset-px rounded-lg border-2" aria-hidden="true"></span>
    </label>
  </div>
</fieldset>

Checkboxes

List with description

<fieldset>
  <legend class="sr-only">Notifications</legend>
  <div class="space-y-5">
    <div class="flex gap-3">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" checked class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="comments" class="font-medium text-gray-900">Comments</label>
        <p id="comments-description" class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
      </div>
    </div>
    <div class="flex gap-3">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="candidates" aria-describedby="candidates-description" name="candidates" type="checkbox" class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="candidates" class="font-medium text-gray-900">Candidates</label>
        <p id="candidates-description" class="text-gray-500">Get notified when a candidate applies for a job.</p>
      </div>
    </div>
    <div class="flex gap-3">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="offers" aria-describedby="offers-description" name="offers" type="checkbox" class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="offers" class="font-medium text-gray-900">Offers</label>
        <p id="offers-description" class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
      </div>
    </div>
  </div>
</fieldset>

List with inline description

<fieldset>
  <legend class="sr-only">Notifications</legend>
  <div class="space-y-5">
    <div class="flex gap-3">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" checked class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="comments" class="font-medium text-gray-900">New comments</label>
        <span id="comments-description" class="text-gray-500"><span class="sr-only">New comments </span>so you always know what's happening.</span>
      </div>
    </div>
    <div class="flex gap-3">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="candidates" aria-describedby="candidates-description" name="candidates" type="checkbox" class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="candidates" class="font-medium text-gray-900">New candidates</label>
        <span id="candidates-description" class="text-gray-500"><span class="sr-only">New candidates </span>who apply for any open postings.</span>
      </div>
    </div>
    <div class="flex gap-3">
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="offers" aria-describedby="offers-description" name="offers" type="checkbox" class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
      <div class="text-sm/6">
        <label for="offers" class="font-medium text-gray-900">Offers</label>
        <span id="offers-description" class="text-gray-500"><span class="sr-only">Offers </span>when they are accepted or rejected by candidates.</span>
      </div>
    </div>
  </div>
</fieldset>

List with checkbox on right

<fieldset class="border-b border-t border-gray-200">
  <legend class="sr-only">Notifications</legend>
  <div class="divide-y divide-gray-200">
    <div class="relative flex gap-3 pb-4 pt-3.5">
      <div class="min-w-0 flex-1 text-sm/6">
        <label for="comments" class="font-medium text-gray-900">Comments</label>
        <p id="comments-description" class="text-gray-500">Get notified when someones posts a comment on a posting.</p>
      </div>
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="comments" aria-describedby="comments-description" name="comments" type="checkbox" checked class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
    </div>
    <div class="relative flex gap-3 pb-4 pt-3.5">
      <div class="min-w-0 flex-1 text-sm/6">
        <label for="candidates" class="font-medium text-gray-900">Candidates</label>
        <p id="candidates-description" class="text-gray-500">Get notified when a candidate applies for a job.</p>
      </div>
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="candidates" aria-describedby="candidates-description" name="candidates" type="checkbox" class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
    </div>
    <div class="relative flex gap-3 pb-4 pt-3.5">
      <div class="min-w-0 flex-1 text-sm/6">
        <label for="offers" class="font-medium text-gray-900">Offers</label>
        <p id="offers-description" class="text-gray-500">Get notified when a candidate accepts or rejects an offer.</p>
      </div>
      <div class="flex h-6 shrink-0 items-center">
        <div class="group grid size-4 grid-cols-1">
          <input id="offers" aria-describedby="offers-description" name="offers" type="checkbox" class="col-start-1 row-start-1 appearance-none rounded border border-gray-300 bg-white checked:border-indigo-600 checked:bg-indigo-600 indeterminate:border-indigo-600 indeterminate:bg-indigo-600 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600 disabled:border-gray-300 disabled:bg-gray-100 disabled:checked:bg-gray-100 forced-colors:appearance-auto">
          <svg class="pointer-events-none col-start-1 row-start-1 size-3.5 self-center justify-self-center stroke-white group-has-[:disabled]:stroke-gray-950/25" viewBox="0 0 14 14" fill="none">
            <path class="opacity-0 group-has-[:checked]:opacity-100" d="M3 8L6 11L11 3.5" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
            <path class="opacity-0 group-has-[:indeterminate]:opacity-100" d="M3 7H11" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
          </svg>
        </div>
      </div>
    </div>
  </div>
</fieldset>

Toggles

Simple toggle

<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button type="button" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false">
  <span class="sr-only">Use setting</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span aria-hidden="true" class="pointer-events-none inline-block size-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
</button>

Toggle with icon

<!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
<button type="button" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false">
  <span class="sr-only">Use setting</span>
  <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
  <span class="pointer-events-none relative inline-block size-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out">
    <!-- Enabled: "opacity-0 duration-100 ease-out", Not Enabled: "opacity-100 duration-200 ease-in" -->
    <span class="absolute inset-0 flex size-full items-center justify-center opacity-100 transition-opacity duration-200 ease-in" aria-hidden="true">
      <svg class="size-3 text-gray-400" fill="none" viewBox="0 0 12 12">
        <path d="M4 8l2-2m0 0l2-2M6 6L4 4m2 2l2 2" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round" />
      </svg>
    </span>
    <!-- Enabled: "opacity-100 duration-200 ease-in", Not Enabled: "opacity-0 duration-100 ease-out" -->
    <span class="absolute inset-0 flex size-full items-center justify-center opacity-0 transition-opacity duration-100 ease-out" aria-hidden="true">
      <svg class="size-3 text-indigo-600" fill="currentColor" viewBox="0 0 12 12">
        <path d="M3.707 5.293a1 1 0 00-1.414 1.414l1.414-1.414zM5 8l-.707.707a1 1 0 001.414 0L5 8zm4.707-3.293a1 1 0 00-1.414-1.414l1.414 1.414zm-7.414 2l2 2 1.414-1.414-2-2-1.414 1.414zm3.414 2l4-4-1.414-1.414-4 4 1.414 1.414z" />
      </svg>
    </span>
  </span>
</button>

With right label

<div class="flex items-center">
  <!-- Enabled: "bg-indigo-600", Not Enabled: "bg-gray-200" -->
  <button type="button" class="relative inline-flex h-6 w-11 shrink-0 cursor-pointer rounded-full border-2 border-transparent bg-gray-200 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" role="switch" aria-checked="false" aria-labelledby="annual-billing-label">
    <!-- Enabled: "translate-x-5", Not Enabled: "translate-x-0" -->
    <span aria-hidden="true" class="pointer-events-none inline-block size-5 translate-x-0 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out"></span>
  </button>
  <span class="ml-3 text-sm" id="annual-billing-label">
    <span class="font-medium text-gray-900">Annual billing</span>
    <span class="text-gray-500">(Save 10%)</span>
  </span>
</div>