Checkboxes

Ported from HyperUI’s Checkboxes — see Attribution.

Base

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

MobileSMMDLGFullLTR

Flutter

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

  @override
  State<Checkboxes1Example> createState() => _Checkboxes1ExampleState();
}

class _Checkboxes1ExampleState extends State<Checkboxes1Example> {
  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',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                    formControl: true,
                    checked: _checked0,
                  ),
                  const Style(
                    'font-medium text-gray-700 dark:text-gray-200',
                    child: Text('Option 1'),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked1 = !_checked1),
              child: Style(
                'inline-flex items-center gap-3',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                    formControl: true,
                    checked: _checked1,
                  ),
                  const Style(
                    'font-medium text-gray-700 dark:text-gray-200',
                    child: Text('Option 2'),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked2 = !_checked2),
              child: Style(
                'inline-flex items-center gap-3',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                    formControl: true,
                    checked: _checked2,
                  ),
                  const Style(
                    'font-medium text-gray-700 dark:text-gray-200',
                    child: Text('Option 3'),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Original HTML

<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">
      <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option1" />

      <span class="font-medium text-gray-700"> Option 1 </span>
    </label>

    <label for="Option2" class="inline-flex items-center gap-3">
      <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option2" />

      <span class="font-medium text-gray-700"> Option 2 </span>
    </label>

    <label for="Option3" class="inline-flex items-center gap-3">
      <input type="checkbox" class="size-5 rounded border-gray-300 shadow-sm" id="Option3" />

      <span class="font-medium text-gray-700"> Option 3 </span>
    </label>
  </div>
</fieldset>

Described

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

MobileSMMDLGFullLTR

Flutter

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

  @override
  State<Checkboxes2Example> createState() => _Checkboxes2ExampleState();
}

class _Checkboxes2ExampleState extends State<Checkboxes2Example> {
  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',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                    formControl: true,
                    checked: _checked0,
                  ),
                  Expanded(
                    child: Style.empty(
                      children: [
                        const Style(
                          'font-medium text-gray-700 dark:text-gray-200',
                          child: Text('Option 1'),
                        ),
                        const Style(
                          'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                          child: Text(_descriptionText),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked1 = !_checked1),
              child: Style(
                'inline-flex items-start gap-3',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                    formControl: true,
                    checked: _checked1,
                  ),
                  Expanded(
                    child: Style.empty(
                      children: [
                        const Style(
                          'font-medium text-gray-700 dark:text-gray-200',
                          child: Text('Option 2'),
                        ),
                        const Style(
                          'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                          child: Text(_descriptionText),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
            GestureDetector(
              behavior: HitTestBehavior.opaque,
              onTap: () => setState(() => _checked2 = !_checked2),
              child: Style(
                'inline-flex items-start gap-3',
                cursor: SystemMouseCursors.click,
                children: [
                  Style(
                    'my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                    formControl: true,
                    checked: _checked2,
                  ),
                  Expanded(
                    child: Style.empty(
                      children: [
                        const Style(
                          'font-medium text-gray-700 dark:text-gray-200',
                          child: Text('Option 3'),
                        ),
                        const Style(
                          'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                          child: Text(_descriptionText),
                        ),
                      ],
                    ),
                  ),
                ],
              ),
            ),
          ],
        ),
      ],
    );
  }
}

Original HTML

<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="my-0.5 size-5 rounded border-gray-300 shadow-sm"
        id="Option1"
      />

      <div>
        <span class="font-medium text-gray-700"> Option 1 </span>

        <p class="mt-0.5 text-sm text-gray-700">
          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="my-0.5 size-5 rounded border-gray-300 shadow-sm"
        id="Option2"
      />

      <div>
        <span class="font-medium text-gray-700"> Option 2 </span>

        <p class="mt-0.5 text-sm text-gray-700">
          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="my-0.5 size-5 rounded border-gray-300 shadow-sm"
        id="Option3"
      />

      <div>
        <span class="font-medium text-gray-700"> Option 3 </span>

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

Described with divide

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

MobileSMMDLGFullLTR

Flutter

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

  @override
  State<Checkboxes3Example> createState() => _Checkboxes3ExampleState();
}

class _Checkboxes3ExampleState extends State<Checkboxes3Example> {
  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(
          'flow-root',
          child: Style(
            '-my-3 flex flex-col items-start divide-y divide-gray-200 dark:divide-gray-700',
            children: [
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _checked0 = !_checked0),
                child: Style(
                  'inline-flex items-start gap-3 py-3',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style(
                      'my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                      formControl: true,
                      checked: _checked0,
                    ),
                    Expanded(
                      child: Style.empty(
                        children: [
                          const Style(
                            'font-medium text-gray-700 dark:text-gray-200',
                            child: Text('Option 1'),
                          ),
                          const Style(
                            'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                            child: Text(_descriptionText),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _checked1 = !_checked1),
                child: Style(
                  'inline-flex items-start gap-3 py-3',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style(
                      'my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                      formControl: true,
                      checked: _checked1,
                    ),
                    Expanded(
                      child: Style.empty(
                        children: [
                          const Style(
                            'font-medium text-gray-700 dark:text-gray-200',
                            child: Text('Option 2'),
                          ),
                          const Style(
                            'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                            child: Text(_descriptionText),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
              GestureDetector(
                behavior: HitTestBehavior.opaque,
                onTap: () => setState(() => _checked2 = !_checked2),
                child: Style(
                  'inline-flex items-start gap-3 py-3',
                  cursor: SystemMouseCursors.click,
                  children: [
                    Style(
                      'my-0.5 size-5 rounded border-gray-300 shadow-sm dark:border-gray-600 dark:bg-gray-900 dark:ring-offset-gray-900 dark:checked:bg-blue-600',
                      formControl: true,
                      checked: _checked2,
                    ),
                    Expanded(
                      child: Style.empty(
                        children: [
                          const Style(
                            'font-medium text-gray-700 dark:text-gray-200',
                            child: Text('Option 3'),
                          ),
                          const Style(
                            'mt-0.5 text-sm text-gray-700 dark:text-gray-200',
                            child: Text(_descriptionText),
                          ),
                        ],
                      ),
                    ),
                  ],
                ),
              ),
            ],
          ),
        ),
      ],
    );
  }
}

Original HTML

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

  <div class="flow-root">
    <div class="-my-3 flex flex-col items-start divide-y divide-gray-200">
      <label for="Option1" class="inline-flex items-start gap-3 py-3">
        <input
          type="checkbox"
          class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
          id="Option1"
        />

        <div>
          <span class="font-medium text-gray-700"> Option 1 </span>

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

      <label for="Option2" class="inline-flex items-start gap-3 py-3">
        <input
          type="checkbox"
          class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
          id="Option2"
        />

        <div>
          <span class="font-medium text-gray-700"> Option 2 </span>

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

      <label for="Option3" class="inline-flex items-start gap-3 py-3">
        <input
          type="checkbox"
          class="my-0.5 size-5 rounded border-gray-300 shadow-sm"
          id="Option3"
        />

        <div>
          <span class="font-medium text-gray-700"> Option 3 </span>

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