Neobrutalism Checkboxes Base with description

Live Preview
<fieldset>
      <legend class="sr-only">Checkboxes</legend>

      <div class="flex flex-col items-start gap-3">
        <label for="Option1" class="inline-flex items-start gap-3">
          <input
            type="checkbox"
            class="size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
            id="Option1"
          />

          <div>
            <strong class="font-semibold"> Option 1 </strong>

            <p class="mt-0.5 text-sm text-pretty">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
            </p>
          </div>
        </label>

        <label for="Option2" class="inline-flex items-start gap-3">
          <input
            type="checkbox"
            class="size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
            id="Option2"
          />

          <div>
            <strong class="font-semibold"> Option 2 </strong>

            <p class="mt-0.5 text-sm text-pretty">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
            </p>
          </div>
        </label>

        <label for="Option3" class="inline-flex items-start gap-3">
          <input
            type="checkbox"
            class="size-6 border-2 border-black shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
            id="Option3"
          />

          <div>
            <strong class="font-semibold"> Option 3 </strong>

            <p class="mt-0.5 text-sm text-pretty">
              Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.
            </p>
          </div>
        </label>
      </div>
    </fieldset>

Related components

More items from the merged UI library.

View all