Components

Checkbox

Visible label

Render the label text inside an element with a .ui-label class. Also, don't miss the info on label accessibility.

Choice ADisabledChecked and disabled Long text dolor amet mustache knausgaard +1, blue bottle waistcoat tbh semiotics artisan synth stumptown gastropub cornhole privacy policy ipsum

Vue

<script setup lang="ts">
import { Checkbox } from "opui-css/vue"
</script>

<template>
  <Checkbox checked name="checkbox-visible-label">Choice A</Checkbox>
  <Checkbox disabled name="checkbox-visible-label">Disabled</Checkbox>
  <Checkbox checked disabled name="checkbox-visible-label"
    >Checked and disabled</Checkbox
  >
  <Checkbox name="checkbox-visible-label">
    Long text dolor amet mustache knausgaard +1, blue bottle waistcoat tbh
    semiotics artisan synth stumptown gastropub cornhole
    <a class="ui-link" href="#visible-label">privacy policy ipsum</a>
  </Checkbox>
</template>

Output

<!--[--><label class="ui-checkbox"
  ><input type="checkbox" name="checkbox-visible-label" checked /><span
    class="ui-label"
    ><!--[-->Choice A<!--]--></span
  ><!----></label
><label class="ui-checkbox"
  ><input type="checkbox" name="checkbox-visible-label" disabled /><span
    class="ui-label"
    ><!--[-->Disabled<!--]--></span
  ><!----></label
><label class="ui-checkbox"
  ><input type="checkbox" name="checkbox-visible-label" checked disabled /><span
    class="ui-label"
    ><!--[-->Checked and disabled<!--]--></span
  ><!----></label
><label class="ui-checkbox"
  ><input type="checkbox" name="checkbox-visible-label" /><span class="ui-label"
    ><!--[-->
    Long text dolor amet mustache knausgaard +1, blue bottle waistcoat tbh
    semiotics artisan synth stumptown gastropub cornhole
    <a class="ui-link" href="#visible-label">privacy policy ipsum</a
    ><!--]--></span
  ><!----></label
><!--]-->

Label position

DefaultStack

Vue

<script setup lang="ts">
import { Checkbox } from "opui-css/vue"
</script>

<template>
  <Checkbox name="checkbox-label-position">Default</Checkbox>
  <Checkbox stack name="checkbox-label-position">Stack</Checkbox>
</template>

Output

<!--[--><label class="ui-checkbox"
  ><input type="checkbox" name="checkbox-label-position" /><span
    class="ui-label"
    ><!--[-->Default<!--]--></span
  ><!----></label
><label class="ui-checkbox ui-stack"
  ><input type="checkbox" name="checkbox-label-position" /><span
    class="ui-label"
    ><!--[-->Stack<!--]--></span
  ><!----></label
><!--]-->

End text

Default Supporting text Stack Supporting text

Vue

<script setup lang="ts">
import { Checkbox } from "opui-css/vue"
</script>

<template>
  <Checkbox name="checkbox-supporting-text">
    Default
    <template #end-text>Supporting text</template>
  </Checkbox>
  <Checkbox stack name="checkbox-supporting-text">
    Stack
    <template #end-text>Supporting text</template>
  </Checkbox>
</template>

Output

<!--[--><label class="ui-checkbox"
  ><input
    type="checkbox"
    name="checkbox-supporting-text"
    aria-describedby="s3-0"
  /><span class="ui-label"
    ><!--[-->
    Default
    <!--]--></span
  ><span id="s3-0" class="ui-end-text"
    ><!--[-->Supporting text<!--]--></span
  ></label
><label class="ui-checkbox ui-stack"
  ><input
    type="checkbox"
    name="checkbox-supporting-text"
    aria-describedby="s3-1"
  /><span class="ui-label"
    ><!--[-->
    Stack
    <!--]--></span
  ><span id="s3-1" class="ui-end-text"
    ><!--[-->Supporting text<!--]--></span
  ></label
><!--]-->

Validation

Add the required attribute on the component. It is forwarded to the underlying <input>.

Use the error prop to toggle invalid styles. It rendersdata-invalid on the root element. Make use of the end text to give extra feedback on the error.

DefaultStack

Default Check yourself Stack Before you wreck yourself

Vue

<script setup lang="ts">
import { Checkbox } from "opui-css/vue"
</script>

<template>
  <div class="example-row ui-spacious">
    <Checkbox required name="checkbox-validation">Default</Checkbox>
    <Checkbox stack required name="checkbox-validation">Stack</Checkbox>
  </div>
  <div class="example-row ui-spacious">
    <Checkbox error checked name="checkbox-validation">
      Default
      <template #end-text>Check yourself</template>
    </Checkbox>
    <Checkbox stack error name="checkbox-validation">
      Stack
      <template #end-text>Before you wreck yourself</template>
    </Checkbox>
  </div>
</template>

Output

<!--[-->
<div class="example-row ui-spacious">
  <label class="ui-checkbox"
    ><input type="checkbox" name="checkbox-validation" required /><span
      class="ui-label"
      ><!--[-->Default<!--]--></span
    ><!----></label
  ><label class="ui-checkbox ui-stack"
    ><input type="checkbox" name="checkbox-validation" required /><span
      class="ui-label"
      ><!--[-->Stack<!--]--></span
    ><!----></label
  >
</div>
<div class="example-row ui-spacious">
  <label class="ui-checkbox" data-invalid
    ><input
      type="checkbox"
      name="checkbox-validation"
      checked
      aria-describedby="s4-2"
    /><span class="ui-label"
      ><!--[-->
      Default
      <!--]--></span
    ><span id="s4-2" class="ui-end-text"
      ><!--[-->Check yourself<!--]--></span
    ></label
  ><label class="ui-checkbox ui-stack" data-invalid
    ><input
      type="checkbox"
      name="checkbox-validation"
      aria-describedby="s4-3"
    /><span class="ui-label"
      ><!--[-->
      Stack
      <!--]--></span
    ><span id="s4-3" class="ui-end-text"
      ><!--[-->Before you wreck yourself<!--]--></span
    ></label
  >
</div>
<!--]-->

Indeterminate

Set the indeterminate prop to render a partially-selected state.indeterminate is a JavaScript-only property on HTMLInputElement, so the component renders data-indeterminate and applies the property at runtime.

Select all

ApplesBananasCherries

Vue

<script setup lang="ts">
import { computed, ref } from "vue"
import { Checkbox, FieldGroup, FieldLegend, FieldSet } from "opui-css/vue"

const items = ["Apples", "Bananas", "Cherries"]
const checked = ref([true, false, false])

const allChecked = computed(() => checked.value.every(Boolean))
const someChecked = computed(() => checked.value.some(Boolean))
const indeterminate = computed(() => someChecked.value && !allChecked.value)

function toggleAll() {
  const next = !allChecked.value
  checked.value = checked.value.map(() => next)
}
</script>

<template>
  <FieldSet class="indeterminate-demo">
    <FieldLegend>
      <Checkbox
        class="parent"
        :model-value="allChecked"
        :indeterminate="indeterminate"
        @update:model-value="toggleAll"
        >Select all</Checkbox
      >
    </FieldLegend>
    <FieldGroup name="indeterminate-children">
      <Checkbox
        class="child"
        v-for="(item, index) in items"
        :key="item"
        v-model="checked[index]"
        >{{ item }}</Checkbox
      >
    </FieldGroup>
  </FieldSet>
</template>

Output

<fieldset class="ui-fieldset indeterminate-demo">
  <!--[-->
  <legend class="">
    <!--[--><label class="ui-checkbox parent"
      ><input type="checkbox" data-indeterminate /><span class="ui-label"
        ><!--[-->Select all<!--]--></span
      ><!----></label
    ><!--]-->
  </legend>
  <div class="ui-field-group" role="group">
    <!--[--><!--[--><label class="ui-checkbox child"
      ><input type="checkbox" name="indeterminate-children" checked /><span
        class="ui-label"
        ><!--[-->Apples<!--]--></span
      ><!----></label
    ><label class="ui-checkbox child"
      ><input type="checkbox" name="indeterminate-children" /><span
        class="ui-label"
        ><!--[-->Bananas<!--]--></span
      ><!----></label
    ><label class="ui-checkbox child"
      ><input type="checkbox" name="indeterminate-children" /><span
        class="ui-label"
        ><!--[-->Cherries<!--]--></span
      ><!----></label
    ><!--]--><!--]-->
  </div>
  <!--]-->
</fieldset>

Spread

Use the spread prop to push the label to the left and the checkbox to the right. This is useful for full-width items like lists and menus.

Accept Terms & Conditions I have read and agree to the privacy policy. Required You must accept this to continue. Disabled This checkbox is disabled. Invalid Checkbox There is an error with this checkbox.

Vue

<script setup lang="ts">
import { Checkbox } from "opui-css/vue"
</script>

<template>
  <Checkbox name="checkbox-spread" spread>
    Accept Terms & Conditions
    <template #end-text>I have read and agree to the privacy policy.</template>
  </Checkbox>

  <Checkbox name="checkbox-spread" spread required>
    Required
    <template #end-text>You must accept this to continue.</template>
  </Checkbox>

  <Checkbox name="checkbox-spread" spread disabled>
    Disabled
    <template #end-text>This checkbox is disabled.</template>
  </Checkbox>

  <Checkbox name="checkbox-spread" spread error>
    Invalid Checkbox
    <template #end-text>There is an error with this checkbox.</template>
  </Checkbox>
</template>

Output

<!--[--><label class="ui-checkbox ui-spread"
  ><input type="checkbox" name="checkbox-spread" aria-describedby="s6-0" /><span
    class="ui-label"
    ><!--[-->
    Accept Terms & Conditions
    <!--]--></span
  ><span id="s6-0" class="ui-end-text"
    ><!--[-->I have read and agree to the privacy policy.<!--]--></span
  ></label
><label class="ui-checkbox ui-spread"
  ><input
    type="checkbox"
    name="checkbox-spread"
    required
    aria-describedby="s6-1"
  /><span class="ui-label"
    ><!--[-->
    Required
    <!--]--></span
  ><span id="s6-1" class="ui-end-text"
    ><!--[-->You must accept this to continue.<!--]--></span
  ></label
><label class="ui-checkbox ui-spread"
  ><input
    type="checkbox"
    name="checkbox-spread"
    disabled
    aria-describedby="s6-2"
  /><span class="ui-label"
    ><!--[-->
    Disabled
    <!--]--></span
  ><span id="s6-2" class="ui-end-text"
    ><!--[-->This checkbox is disabled.<!--]--></span
  ></label
><label class="ui-checkbox ui-spread" data-invalid
  ><input type="checkbox" name="checkbox-spread" aria-describedby="s6-3" /><span
    class="ui-label"
    ><!--[-->
    Invalid Checkbox
    <!--]--></span
  ><span id="s6-3" class="ui-end-text"
    ><!--[-->There is an error with this checkbox.<!--]--></span
  ></label
><!--]-->

Sizes

Vue

<script setup lang="ts">
import { Checkbox } from "opui-css/vue"
</script>

<template>
  <div class="example-row">
    <Checkbox hideLabel size="small" checked name="checkbox-sizes"
      >Label</Checkbox
    >
    <Checkbox hideLabel checked name="checkbox-sizes">Label</Checkbox>
    <Checkbox hideLabel size="large" checked name="checkbox-sizes"
      >Label</Checkbox
    >
  </div>
  <div class="example-row">
    <Checkbox size="small" checked name="checkbox-sizes">Small</Checkbox>
    <Checkbox checked name="checkbox-sizes">Default</Checkbox>
    <Checkbox size="large" checked name="checkbox-sizes">Large</Checkbox>
  </div>
</template>

Output

<!--[-->
<div class="example-row">
  <label class="ui-checkbox ui-small"
    ><input type="checkbox" name="checkbox-sizes" checked /><span
      class="ui-sr-only"
      ><!--[-->Label<!--]--></span
    ><!----></label
  ><label class="ui-checkbox"
    ><input type="checkbox" name="checkbox-sizes" checked /><span
      class="ui-sr-only"
      ><!--[-->Label<!--]--></span
    ><!----></label
  ><label class="ui-checkbox ui-large"
    ><input type="checkbox" name="checkbox-sizes" checked /><span
      class="ui-sr-only"
      ><!--[-->Label<!--]--></span
    ><!----></label
  >
</div>
<div class="example-row">
  <label class="ui-checkbox ui-small"
    ><input type="checkbox" name="checkbox-sizes" checked /><span
      class="ui-label"
      ><!--[-->Small<!--]--></span
    ><!----></label
  ><label class="ui-checkbox"
    ><input type="checkbox" name="checkbox-sizes" checked /><span
      class="ui-label"
      ><!--[-->Default<!--]--></span
    ><!----></label
  ><label class="ui-checkbox ui-large"
    ><input type="checkbox" name="checkbox-sizes" checked /><span
      class="ui-label"
      ><!--[-->Large<!--]--></span
    ><!----></label
  >
</div>
<!--]-->

Field group

Use field groups to group related checkboxes.

The name prop will get passed down to each checkbox in the group.

Direction

Vue

<script setup lang="ts">
import { Checkbox, FieldGroup, FieldLegend, FieldSet, Form } from "opui-css/vue"
</script>

<template>
  <Form>
    <FieldSet>
      <FieldLegend>Legend</FieldLegend>
      <FieldGroup direction="row" name="checkbox-group-direction">
        <Checkbox checked>Checkbox 1</Checkbox>
        <Checkbox>Checkbox 2</Checkbox>
        <Checkbox>Checkbox 3</Checkbox>
      </FieldGroup>
    </FieldSet>
  </Form>
</template>

Output

<form class="ui-form">
  <!--[-->
  <fieldset class="ui-fieldset">
    <!--[-->
    <legend class=""><!--[-->Legend<!--]--></legend>
    <div class="ui-field-group ui-row" role="group">
      <!--[--><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-direction" checked /><span
          class="ui-label"
          ><!--[-->Checkbox 1<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-direction" /><span
          class="ui-label"
          ><!--[-->Checkbox 2<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-direction" /><span
          class="ui-label"
          ><!--[-->Checkbox 3<!--]--></span
        ><!----></label
      ><!--]-->
    </div>
    <!--]-->
  </fieldset>
  <!--]-->
</form>

Field description

Can be placed above and below the fields.

Vue

<script setup lang="ts">
import {
  Checkbox,
  FieldDescription,
  FieldGroup,
  FieldLegend,
  FieldSet,
  Form,
} from "opui-css/vue"
</script>

<template>
  <Form>
    <FieldSet>
      <FieldLegend>Legend</FieldLegend>
      <FieldDescription>Field description above fields</FieldDescription>
      <FieldGroup direction="row" name="checkbox-group-field-description-1">
        <Checkbox checked>Checkbox 1</Checkbox>
        <Checkbox>Checkbox 2</Checkbox>
        <Checkbox>Checkbox 3</Checkbox>
      </FieldGroup>
    </FieldSet>

    <FieldSet>
      <FieldLegend>Legend</FieldLegend>
      <FieldGroup direction="row" name="checkbox-group-field-description-2">
        <Checkbox checked>Checkbox 1</Checkbox>
        <Checkbox>Checkbox 2</Checkbox>
        <Checkbox>Checkbox 3</Checkbox>
      </FieldGroup>
      <FieldDescription>Field description below fields</FieldDescription>
    </FieldSet>
  </Form>
</template>

Output

<form class="ui-form">
  <!--[-->
  <fieldset class="ui-fieldset">
    <!--[-->
    <legend class=""><!--[-->Legend<!--]--></legend>
    <p class="ui-field-description">
      <!--[-->Field description above fields<!--]-->
    </p>
    <div class="ui-field-group ui-row" role="group">
      <!--[--><label class="ui-checkbox"
        ><input
          type="checkbox"
          name="checkbox-group-field-description-1"
          checked
        /><span class="ui-label"><!--[-->Checkbox 1<!--]--></span><!----></label
      ><label class="ui-checkbox"
        ><input
          type="checkbox"
          name="checkbox-group-field-description-1"
        /><span class="ui-label"><!--[-->Checkbox 2<!--]--></span><!----></label
      ><label class="ui-checkbox"
        ><input
          type="checkbox"
          name="checkbox-group-field-description-1"
        /><span class="ui-label"><!--[-->Checkbox 3<!--]--></span><!----></label
      ><!--]-->
    </div>
    <!--]-->
  </fieldset>
  <fieldset class="ui-fieldset">
    <!--[-->
    <legend class=""><!--[-->Legend<!--]--></legend>
    <div class="ui-field-group ui-row" role="group">
      <!--[--><label class="ui-checkbox"
        ><input
          type="checkbox"
          name="checkbox-group-field-description-2"
          checked
        /><span class="ui-label"><!--[-->Checkbox 1<!--]--></span><!----></label
      ><label class="ui-checkbox"
        ><input
          type="checkbox"
          name="checkbox-group-field-description-2"
        /><span class="ui-label"><!--[-->Checkbox 2<!--]--></span><!----></label
      ><label class="ui-checkbox"
        ><input
          type="checkbox"
          name="checkbox-group-field-description-2"
        /><span class="ui-label"><!--[-->Checkbox 3<!--]--></span><!----></label
      ><!--]-->
    </div>
    <p class="ui-field-description">
      <!--[-->Field description below fields<!--]-->
    </p>
    <!--]-->
  </fieldset>
  <!--]-->
</form>

Disabled

Attach the disabled attribute to the <fieldset> element.

Vue

<script setup lang="ts">
import { Checkbox, FieldGroup, FieldLegend, FieldSet, Form } from "opui-css/vue"
</script>

<template>
  <Form>
    <FieldSet disabled>
      <FieldLegend>Legend</FieldLegend>
      <FieldGroup direction="row" name="checkbox-group-disabled">
        <Checkbox checked>Checkbox 1</Checkbox>
        <Checkbox>Checkbox 2</Checkbox>
        <Checkbox>Checkbox 3</Checkbox>
      </FieldGroup>
    </FieldSet>
  </Form>
</template>

Output

<form class="ui-form">
  <!--[-->
  <fieldset class="ui-fieldset" disabled>
    <!--[-->
    <legend class=""><!--[-->Legend<!--]--></legend>
    <div class="ui-field-group ui-row" role="group">
      <!--[--><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-disabled" checked /><span
          class="ui-label"
          ><!--[-->Checkbox 1<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-disabled" /><span
          class="ui-label"
          ><!--[-->Checkbox 2<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-disabled" /><span
          class="ui-label"
          ><!--[-->Checkbox 3<!--]--></span
        ><!----></label
      ><!--]-->
    </div>
    <!--]-->
  </fieldset>
  <!--]-->
</form>

Required

Attach the required attribute to at least one of your <input> elements.

Vue

<script setup lang="ts">
import { Checkbox, FieldGroup, FieldLegend, FieldSet, Form } from "opui-css/vue"
</script>

<template>
  <Form>
    <FieldSet>
      <FieldLegend>These are required!</FieldLegend>
      <FieldGroup direction="row" name="checkbox-group-required">
        <Checkbox required>Checkbox 1</Checkbox>
        <Checkbox required>Checkbox 2</Checkbox>
        <Checkbox required>Checkbox 3</Checkbox>
      </FieldGroup>
    </FieldSet>
  </Form>
</template>

Output

<form class="ui-form">
  <!--[-->
  <fieldset class="ui-fieldset">
    <!--[-->
    <legend class=""><!--[-->These are required!<!--]--></legend>
    <div class="ui-field-group ui-row" role="group">
      <!--[--><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-required" required /><span
          class="ui-label"
          ><!--[-->Checkbox 1<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-required" required /><span
          class="ui-label"
          ><!--[-->Checkbox 2<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-required" required /><span
          class="ui-label"
          ><!--[-->Checkbox 3<!--]--></span
        ><!----></label
      ><!--]-->
    </div>
    <!--]-->
  </fieldset>
  <!--]-->
</form>

Validation

Attach the data-invalid attribute to your FieldSet component.

Vue

<script setup lang="ts">
import { Checkbox, FieldGroup, FieldLegend, FieldSet, Form } from "opui-css/vue"
</script>

<template>
  <Form>
    <FieldSet data-invalid>
      <FieldLegend>Legend</FieldLegend>
      <FieldGroup direction="row" name="checkbox-group-validation">
        <Checkbox checked>Checkbox 1</Checkbox>
        <Checkbox>Checkbox 2</Checkbox>
        <Checkbox>Checkbox 3</Checkbox>
      </FieldGroup>
      <span class="ui-end-text">Something went wrong!</span>
    </FieldSet>
  </Form>
</template>

Output

<form class="ui-form">
  <!--[-->
  <fieldset class="ui-fieldset" data-invalid>
    <!--[-->
    <legend class=""><!--[-->Legend<!--]--></legend>
    <div class="ui-field-group ui-row" role="group">
      <!--[--><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-validation" checked /><span
          class="ui-label"
          ><!--[-->Checkbox 1<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-validation" /><span
          class="ui-label"
          ><!--[-->Checkbox 2<!--]--></span
        ><!----></label
      ><label class="ui-checkbox"
        ><input type="checkbox" name="checkbox-group-validation" /><span
          class="ui-label"
          ><!--[-->Checkbox 3<!--]--></span
        ><!----></label
      ><!--]-->
    </div>
    <span class="ui-end-text">Something went wrong!</span><!--]-->
  </fieldset>
  <!--]-->
</form>

Labels

Accessible checkboxes must have a label. You can choose between three approaches:

Approach	Usage in Checkbox component
Provide a label text inside the `label`/`role="checkbox"` element	Default
Add a `aria-label` on the input element	Not used
Have a visible label that you reference with `aria-labelledby`	Not used

Keyboard support

Key	Function
`Space`	When Checkbox is focused it changes its state.
`Enter`	(Optional) When Checkbox is focused it changes its state.

API

Checkbox API

Prop	Type	Default	Description
`error`	`boolean`	`false`	Shows error styles.
`hideLabel`	`boolean`	`false`	Visually hides the label.
`indeterminate`	`boolean`	`false`	Shows a partially checked state. Sets the `indeterminate` property on the `<input>`.
`size`	`"small"`, `"large"`	-	The size of the element.
`spread`	`boolean`	`false`	Pushes the label and the input to opposite ends.
`stack`	`boolean`	`false`	Stacks the label under the input.
`v-model`	`boolean`, `(string`, `number)[]`	-	The checked state, or the checked values of a group.

Slots

Slot	Description
`default`	The label.
`end-text`	Supporting text displayed below the label.

Attributes that aren't props, such as disabled or name, go to the <input>.

Field group API

Prop	Type	Default	Description
`direction`	`"row"`, `"column"`	-	The orientation of the element.
`name`	`string`	-	Sets `name` on every input, select and textarea inside.

Slots

Slot	Description
`default`	The fields, such as checkboxes, radios or switches.

Browser support

See also the full browser support guide.

Installation

@layer components.root {
  label.ui-checkbox {
    --_input-size: var(--size-4);

    align-items: center;
    color: var(--text-primary);
    cursor: pointer;
    display: inline-grid;
    gap: 0 var(--size-2);
    grid-auto-columns: auto;
    grid-auto-flow: column;
    inline-size: fit-content;
    line-height: 1.5;
    transform: translateZ(0);
    user-select: none;

    /* Disabled */
    &:has([disabled]) {
      cursor: not-allowed;
      opacity: 0.64;
      user-select: none;

      input {
        cursor: not-allowed;
      }
    }

    /* Required dot */
    &:has(:invalid) {
      .ui-label:after {
        color: var(--red);
        content: "*";
        inset: 0 -0.25ex auto auto;
        position: absolute;
      }
    }

    /* Label */
    .ui-label {
      color: var(--text-primary);
      font-size: var(--font-size-05);
      grid-column: 2;
      grid-row: 1;
      padding-inline: 0 1ex;
      position: relative;
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      grid-column: 2;
      grid-row: 2;
      line-height: 1.5;
      z-index: 1;
    }

    /* Spread layout */
    &.ui-spread {
      align-items: center;
      column-gap: var(--size-4);
      grid-auto-flow: unset;
      grid-template-columns: 1fr auto;
      inline-size: 100%;

      .ui-label {
        font-weight: 600;
        grid-column: 1;
        grid-row: 1;
        inline-size: fit-content;
      }

      input {
        grid-column: 2;
        grid-row: 1;
      }

      :where(.ui-end-text) {
        grid-column: 1;
        grid-row: 2;
      }
    }

    /* Stacked layout */
    &.ui-stack {
      grid-auto-columns: unset;
      justify-items: center;

      .ui-label {
        grid-column: 1/-1;
        grid-row: 2;
        margin-block-start: var(--size-1);
        padding-inline: 1ex;

        /* Required dot */
        &::after {
          inset: 0 -0.25ex auto auto;
        }
      }

      .ui-end-text {
        grid-column: 1/-1;
        grid-row: 3;
      }
    }

    /* Input */
    input[type="checkbox"] {
      --_input-size: var(--size-4);

      appearance: none;
      aspect-ratio: 1;
      background-color: var(--surface-default);
      block-size: var(--_input-size);
      border: 1px solid var(--border-color);
      border-radius: var(--radius-1);
      box-sizing: border-box;
      cursor: pointer;
      display: grid;
      font-size: var(--_input-size);
      inline-size: var(--_input-size);
      margin: 0;
      padding: 0;
      place-items: center;
      position: relative;

      &:checked,
      &:indeterminate {
        background-color: var(--primary);
        border-color: var(--primary);
      }

      /* Checkmark */
      &::after {
        background-color: var(--primary-contrast);
        clip-path: polygon(
          15% 52%,
          40% 77%,
          85% 32%,
          75% 22%,
          40% 57%,
          25% 42%
        );
        content: "";
        inset: 0;
        opacity: 0;
        position: absolute;
      }

      &:checked::after,
      &:indeterminate::after {
        opacity: 1;
      }

      /* Indeterminate dash */
      &:indeterminate::after {
        clip-path: polygon(20% 45%, 80% 45%, 80% 55%, 20% 55%);
      }

      &::before {
        --highlight-size: 175%;
      }
    }

    /* Sizes */
    &.ui-small {
      input[type="checkbox"] {
        --_input-size: var(--size-3);
      }
    }

    &.ui-large {
      input[type="checkbox"] {
        --_input-size: var(--size-5);
      }
    }

    /* Validation */
    &[data-invalid],
    &:has(:user-invalid) {
      --primary: var(--critical);

      :where(.ui-end-text) {
        color: var(--critical);
      }
    }

    /* Touch devices */
    @media (pointer: coarse) {
      input {
        --_input-size: var(--size-4);
      }
    }

    @media (forced-colors: active) {
      input {
        border: 1px solid CanvasText;

        &:checked,
        &:indeterminate {
          background-color: SelectedItem;
          border-color: SelectedItem;

          &::after {
            background-color: SelectedItemText;
          }
        }
      }
    }
  }
}

form.css

@layer components.extended {
  /* Form */
  :where(.ui-form) {
    display: grid;
    gap: var(--size-8);

    hr {
      margin-block: 0;
    }
  }

  /* Fieldset */
  :where(.ui-fieldset) {
    all: unset;
    border: 0;
    border-radius: 0;
    display: grid;
    gap: var(--size-1);
    margin: 0;
    min-inline-size: 0;
    padding: 0;

    /* Legend */
    :where(legend, .ui-legend) {
      all: unset;
      color: var(--text-primary);
      font-weight: 600;
      margin-block-end: var(--size-3);
      padding: 0;

      &:has(+ :where(.ui-field-description)) {
        margin-block-end: 0;
      }
    }

    /* Field description / supporting text */
    :where(.ui-field-description) {
      color: var(--text-muted);
      font-size: var(--font-size-05);
      line-height: var(--font-lineheight-3);

      &:has(+ *) {
        margin-block-end: var(--size-3);
      }
    }

    /* End text */
    :where(.ui-end-text) {
      color: var(--text-muted);
      font-size: var(--font-size-0);
      line-height: var(--font-lineheight-3);
    }

    &:has(.ui-text-field.ui-row) {
      row-gap: var(--size-7);
    }

    /* Disabled */
    &[disabled] {
      opacity: 0.64;
      user-select: none;

      input,
      label,
      .ui-label {
        cursor: not-allowed;
      }
    }

    /* Error / validation */
    &[data-invalid] {
      :where(.ui-end-text) {
        color: var(--critical);
      }

      :where(.ui-checkbox, .ui-radio, .ui-switch) {
        --primary: var(--critical);

        :where(.ui-end-text) {
          color: var(--critical);
        }
      }

      :where(.ui-switch) {
        input {
          border-radius: var(--radius-round);
          outline: 2px solid var(--critical);
        }
      }
    }

    /* Required */
    &:has(:invalid) {
      :where(legend, .ui-legend) {
        padding-inline-end: 1ex;
        position: relative;

        &::after {
          color: var(--red);
          content: "*";
          inset: 0 -0.25ex auto auto;
          position: absolute;
        }
      }
    }
  }

  /* Field group */
  :where(.ui-field-group) {
    display: flex;
    flex-direction: column;
    gap: var(--size-4);

    /* If it only has checkboxes, radios, or switches */
    &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)):not(
        :has(> :not(.ui-checkbox, .ui-radio, .ui-switch))
      ) {
      gap: var(--size-2);
    }

    /* If it only has buttons */
    &:has(.ui-button):not(:has(*:not(.ui-button))) {
      align-items: center;
      flex-direction: row;
      gap: var(--size-2);

      /* If it's not preceded by an hr */
      &:not(hr + &) {
        margin-block-start: var(--size-4);
      }
    }

    & + & {
      margin-block-start: var(--size-5);
    }

    /* Directions */
    &.ui-row {
      flex-direction: row;
      flex-wrap: wrap;

      &:has(> :where(.ui-checkbox, .ui-radio, .ui-switch)) {
        gap: var(--size-4);
      }
    }
  }
}

Checkbox

Anatomy

Visible label

Label position

End text

Validation

Indeterminate

Spread

Sizes

Field group

Direction

Field description

Disabled

Required

Validation

Labels

Keyboard support

API

Checkbox API

Slots

Field group API

Slots

Browser support

Installation

See also