Checkboxes

Ported from HyperUI’s Checkboxes — see Attribution.

Base

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class NeobrutalismCheckboxes1Example extends StatefulWidget {
  const NeobrutalismCheckboxes1Example({super.key});

  @override
  State<NeobrutalismCheckboxes1Example> createState() =>
      _NeobrutalismCheckboxes1ExampleState();
}

class _NeobrutalismCheckboxes1ExampleState
    extends State<NeobrutalismCheckboxes1Example> {
  var _checked0 = false;
  var _checked1 = false;
  var _checked2 = false;

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        const Style('sr-only', child: Text('Checkboxes')),
        Style(
          'flex flex-col items-start gap-3',
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked0 = !_checked0),
              child: Style(
                'inline-flex items-center gap-3 text-black dark:text-white',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked0,
                  ),
                  const Style('font-semibold', child: Text('Option 1')),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked1 = !_checked1),
              child: Style(
                'inline-flex items-center gap-3 text-black dark:text-white',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked1,
                  ),
                  const Style('font-semibold', child: Text('Option 2')),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked2 = !_checked2),
              child: Style(
                'inline-flex items-center gap-3 text-black dark:text-white',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked2,
                  ),
                  const Style('font-semibold', child: Text('Option 3')),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

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

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

      <span class="font-semibold"> Option 1 </span>
    </label>

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

      <span class="font-semibold"> Option 2 </span>
    </label>

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

      <span class="font-semibold"> Option 3 </span>
    </label>
  </div>
</fieldset>

Base with description

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class NeobrutalismCheckboxes2Example extends StatefulWidget {
  const NeobrutalismCheckboxes2Example({super.key});

  @override
  State<NeobrutalismCheckboxes2Example> createState() =>
      _NeobrutalismCheckboxes2ExampleState();
}

class _NeobrutalismCheckboxes2ExampleState
    extends State<NeobrutalismCheckboxes2Example> {
  var _checked0 = false;
  var _checked1 = false;
  var _checked2 = false;

  static const _descriptionText =
      'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.';

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        const Style('sr-only', child: Text('Checkboxes')),
        Style(
          'flex flex-col items-start gap-3',
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked0 = !_checked0),
              child: Style(
                'inline-flex items-start gap-3 text-black dark:text-white',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked0,
                  ),
                  Expanded(
                    child: Style.empty(
                      children: [
                        const Style(
                          'font-semibold',
                          child: Text('Option 1'),
                        ),
                        const Style(
                          'mt-0.5 text-sm text-pretty',
                          child: Text(_descriptionText),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked1 = !_checked1),
              child: Style(
                'inline-flex items-start gap-3 text-black dark:text-white',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked1,
                  ),
                  Expanded(
                    child: Style.empty(
                      children: [
                        const Style(
                          'font-semibold',
                          child: Text('Option 2'),
                        ),
                        const Style(
                          'mt-0.5 text-sm text-pretty',
                          child: Text(_descriptionText),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked2 = !_checked2),
              child: Style(
                'inline-flex items-start gap-3 text-black dark:text-white',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked2,
                  ),
                  Expanded(
                    child: Style.empty(
                      children: [
                        const Style(
                          'font-semibold',
                          child: Text('Option 3'),
                        ),
                        const Style(
                          'mt-0.5 text-sm text-pretty',
                          child: Text(_descriptionText),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

<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 text-black">
      <input
        type="checkbox"
        class="size-6 border-2 border-black bg-white 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 text-black">
      <input
        type="checkbox"
        class="size-6 border-2 border-black bg-white 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 text-black">
      <input
        type="checkbox"
        class="size-6 border-2 border-black bg-white 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>

Grouped

Includes a dark: variant — toggle the site theme (top right) to preview it.

Flutter
Original HTML

class NeobrutalismCheckboxes3Example extends StatefulWidget {
  const NeobrutalismCheckboxes3Example({super.key});

  @override
  State<NeobrutalismCheckboxes3Example> createState() =>
      _NeobrutalismCheckboxes3ExampleState();
}

class _NeobrutalismCheckboxes3ExampleState
    extends State<NeobrutalismCheckboxes3Example> {
  var _checked0 = false;
  var _checked1 = false;
  var _checked2 = false;

  @override
  Widget build(BuildContext context) {
    return Style(
      'mx-auto max-w-lg p-6',
      children: [
        const Style('sr-only', child: Text('Checkboxes')),
        Style(
          'flex flex-col items-start divide-y-2 divide-black border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black dark:divide-white dark:border-white dark:bg-gray-900 dark:shadow-white',
          children: [
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked0 = !_checked0),
              child: Style(
                'inline-flex items-start gap-3 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200 dark:focus-within:bg-yellow-700 dark:hover:bg-yellow-700',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked0,
                  ),
                  Expanded(
                    child: Style(
                      'text-black dark:text-white',
                      display: DisplayType.block,
                      children: const [
                        Style('font-semibold', child: Text('Option 1')),
                        Style(
                          'mt-0.5 text-sm text-pretty',
                          child: Text(
                            'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.',
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked1 = !_checked1),
              child: Style(
                'inline-flex items-start gap-3 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200 dark:focus-within:bg-yellow-700 dark:hover:bg-yellow-700',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked1,
                  ),
                  Expanded(
                    child: Style(
                      'text-black dark:text-white',
                      display: DisplayType.block,
                      children: const [
                        Style('font-semibold', child: Text('Option 2')),
                        Style(
                          'mt-0.5 text-sm text-pretty',
                          child: Text(
                            'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.',
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked2 = !_checked2),
              child: Style(
                'inline-flex items-start gap-3 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200 dark:focus-within:bg-yellow-700 dark:hover:bg-yellow-700',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black dark:border-white dark:bg-gray-900 dark:shadow-white dark:focus:ring-white',
                    formControl: true,
                    checked: _checked2,
                  ),
                  Expanded(
                    child: Style(
                      'text-black dark:text-white',
                      display: DisplayType.block,
                      children: const [
                        Style('font-semibold', child: Text('Option 3')),
                        Style(
                          'mt-0.5 text-sm text-pretty',
                          child: Text(
                            'Lorem, ipsum dolor sit amet consectetur adipisicing elit. Ea, distinctio.',
                          ),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

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

  <div
    class="flex flex-col items-start divide-y-2 divide-black border-2 border-black bg-white shadow-[4px_4px_0_0] shadow-black"
  >
    <label
      for="Option1"
      class="inline-flex items-start gap-3 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200"
    >
      <input
        type="checkbox"
        class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
        id="Option1"
      />

      <div class="text-black">
        <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 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200"
    >
      <input
        type="checkbox"
        class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
        id="Option2"
      />

      <div class="text-black">
        <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 p-4 focus-within:bg-yellow-200 hover:bg-yellow-200"
    >
      <input
        type="checkbox"
        class="size-6 border-2 border-black bg-white shadow-[2px_2px_0_0] shadow-black checked:bg-black focus:ring-2 focus:ring-black"
        id="Option3"
      />

      <div class="text-black">
        <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>