UWC Components
  • Default
  • Material
  • Fluent

On this page

Checkbox

Checkbox is an extension to the standard checkbox element with theming and validation support.

uwc-checkbox is a styled checkbox component built on Lit. It supports binary checked state, indeterminate mode, labels, filled/outlined variants, and validation.

Import

All components

import '@uwc/components';

Selected component (Lit / Angular / Vue)

import { UwcCheckbox } from '@uwc/components/checkbox';
customElements.define('uwc-checkbox', UwcCheckbox);

React

import { UwcCheckbox } from '@uwc/components/react';

Usage

Lit

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('app-demo')
export class AppDemo extends LitElement {
  render() {
    return html`<uwc-checkbox label="Accept terms"></uwc-checkbox>`;
  }
}

React

import React from 'react';
import { UwcCheckbox } from '@uwc/components/react';

export default function App() {
  return <UwcCheckbox label="Accept terms" />;
}

Angular

import { Component } from '@angular/core';
import '@uwc/checkbox';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `<uwc-checkbox label="Accept terms"></uwc-checkbox>`,
})
export class AppComponent {}

Vue

import '@uwc/checkbox';

export default {
  template: `<uwc-checkbox label="Accept terms"></uwc-checkbox>`,
};

Basic Usage

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('checkbox-overview-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;">
        <uwc-checkbox label="Unchecked"></uwc-checkbox>
        <uwc-checkbox label="Checked" checked></uwc-checkbox>
        <uwc-checkbox label="Indeterminate" indeterminate></uwc-checkbox>
        <uwc-checkbox label="Disabled" disabled></uwc-checkbox>
      </div>
    `;
  }
}

import React from 'react';
import { UwcCheckbox } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem' }}>
      <UwcCheckbox label="Unchecked" />
      <UwcCheckbox label="Checked" checked />
      <UwcCheckbox label="Indeterminate" indeterminate />
      <UwcCheckbox label="Disabled" disabled />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Unchecked"></uwc-checkbox>
      <uwc-checkbox label="Checked" checked></uwc-checkbox>
      <uwc-checkbox label="Indeterminate" indeterminate></uwc-checkbox>
      <uwc-checkbox label="Disabled" disabled></uwc-checkbox>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Unchecked"></uwc-checkbox>
      <uwc-checkbox label="Checked" checked></uwc-checkbox>
      <uwc-checkbox label="Indeterminate" indeterminate></uwc-checkbox>
      <uwc-checkbox label="Disabled" disabled></uwc-checkbox>
    </div>
  `
};

Basic

Toggle the checked state. The uwc-change event fires with { checked }.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('checkbox-basic-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;">
        <uwc-checkbox label="Unchecked"></uwc-checkbox>
        <uwc-checkbox label="Checked" checked></uwc-checkbox>
        <uwc-checkbox label="Indeterminate" indeterminate></uwc-checkbox>
      </div>
    `;
  }
}

import React from 'react';
import { UwcCheckbox } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem' }}>
      <UwcCheckbox label="Unchecked" />
      <UwcCheckbox label="Checked" checked />
      <UwcCheckbox label="Indeterminate" indeterminate />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Unchecked"></uwc-checkbox>
      <uwc-checkbox label="Checked" checked></uwc-checkbox>
      <uwc-checkbox label="Indeterminate" indeterminate></uwc-checkbox>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Unchecked"></uwc-checkbox>
      <uwc-checkbox label="Checked" checked></uwc-checkbox>
      <uwc-checkbox label="Indeterminate" indeterminate></uwc-checkbox>
    </div>
  `
};

Variants

outlined (default) uses a bordered box; filled uses a filled background.

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('checkbox-variants-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;">
        <uwc-checkbox label="Outlined (default)"></uwc-checkbox>
        <uwc-checkbox label="Outlined checked" checked></uwc-checkbox>
        <uwc-checkbox label="Filled" variant="filled"></uwc-checkbox>
        <uwc-checkbox label="Filled checked" variant="filled" checked></uwc-checkbox>
      </div>
    `;
  }
}

import React from 'react';
import { UwcCheckbox } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem' }}>
      <UwcCheckbox label="Outlined (default)" />
      <UwcCheckbox label="Outlined checked" checked />
      <UwcCheckbox label="Filled" variant="filled" />
      <UwcCheckbox label="Filled checked" variant="filled" checked />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Outlined (default)"></uwc-checkbox>
      <uwc-checkbox label="Outlined checked" checked></uwc-checkbox>
      <uwc-checkbox label="Filled" variant="filled"></uwc-checkbox>
      <uwc-checkbox label="Filled checked" variant="filled" checked></uwc-checkbox>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Outlined (default)"></uwc-checkbox>
      <uwc-checkbox label="Outlined checked" checked></uwc-checkbox>
      <uwc-checkbox label="Filled" variant="filled"></uwc-checkbox>
      <uwc-checkbox label="Filled checked" variant="filled" checked></uwc-checkbox>
    </div>
  `
};

Disabled & Invalid

Set disabled to block interaction or invalid to show a validation error state. 

import { LitElement, html } from 'lit';
import { customElement } from 'lit/decorators.js';

@customElement('checkbox-disabled-demo')
export class AppDemo extends LitElement {
  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.75rem;">
        <uwc-checkbox label="Disabled" disabled></uwc-checkbox>
        <uwc-checkbox label="Disabled checked" checked disabled></uwc-checkbox>
        <uwc-checkbox label="Invalid" invalid></uwc-checkbox>
      </div>
    `;
  }
}

import React from 'react';
import { UwcCheckbox } from '@uwc/components/react';

export default function App() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.75rem' }}>
      <UwcCheckbox label="Disabled" disabled />
      <UwcCheckbox label="Disabled checked" checked disabled />
      <UwcCheckbox label="Invalid" invalid />
    </div>
  );
}

import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Disabled" disabled></uwc-checkbox>
      <uwc-checkbox label="Disabled checked" checked disabled></uwc-checkbox>
      <uwc-checkbox label="Invalid" invalid></uwc-checkbox>
    </div>
  `
})
export class AppComponent {}

export default {
  template: `
    <div style="display:flex;flex-direction:column;gap:.75rem;">
      <uwc-checkbox label="Disabled" disabled></uwc-checkbox>
      <uwc-checkbox label="Disabled checked" checked disabled></uwc-checkbox>
      <uwc-checkbox label="Invalid" invalid></uwc-checkbox>
    </div>
  `
};

Group (Multiple)

Manage a list of checkboxes with reactive state. Listen to uwc-change on each item and track a Set of selected values. 

import { LitElement, html } from 'lit';
import { customElement, state } from 'lit/decorators.js';

@customElement('checkbox-group-demo')
export class AppDemo extends LitElement {
  @state() private _selected = new Set<string>();

  private _items = ['Cheese', 'Mushroom', 'Peppers', 'Olives'];

  private _toggle(item: string, checked: boolean) {
    const s = new Set(this._selected);
    checked ? s.add(item) : s.delete(item);
    this._selected = s;
  }

  render() {
    return html`
      <div style="display:flex;flex-direction:column;gap:.5rem;">
        ${this._items.map(item => html`
          <uwc-checkbox
            label=${item}
            ?checked=${this._selected.has(item)}
            @uwc-change=${(e) => this._toggle(item, e.detail.checked)}>
          </uwc-checkbox>
        `)}
        <small style="color:#64748b;margin-top:.25rem;">
          Selected: ${[...this._selected].join(', ') || 'none'}
        </small>
      </div>
    `;
  }
}

import React, { useState } from 'react';
import { UwcCheckbox } from '@uwc/components/react';

export default function App() {
  const items = ['Cheese', 'Mushroom', 'Peppers', 'Olives'];
  const [selected, setSelected] = useState(new Set());

  const toggle = (item, checked) => {
    setSelected(prev => {
      const s = new Set(prev);
      checked ? s.add(item) : s.delete(item);
      return s;
    });
  };

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '.5rem' }}>
      {items.map(item => (
        <UwcCheckbox
          key={item}
          label={item}
          checked={selected.has(item)}
          onUwcChange={e => toggle(item, e.detail.checked)}
        />
      ))}
      <small style={{ color: '#64748b', marginTop: '.25rem' }}>
        Selected: {[...selected].join(', ') || 'none'}
      </small>
    </div>
  );
}

import { Component, signal, computed } from '@angular/core';

@Component({
  selector: 'app-root',
  standalone: true,
  template: `
    <div style="display:flex;flex-direction:column;gap:.5rem;">
      @for (item of items; track item) {
        <uwc-checkbox
          [label]="item"
          [checked]="selected().has(item)"
          (uwc-change)="toggle(item, $event.detail.checked)">
        </uwc-checkbox>
      }
      <small style="color:#64748b;margin-top:.25rem;">
        Selected: {{ selectedList() || 'none' }}
      </small>
    </div>
  `
})
export class AppComponent {
  items = ['Cheese', 'Mushroom', 'Peppers', 'Olives'];
  readonly selected = signal<Set<string>>(new Set());
  readonly selectedList = computed(() => [...this.selected()].join(', '));

  toggle(item: string, checked: boolean) {
    const s = new Set(this.selected());
    checked ? s.add(item) : s.delete(item);
    this.selected.set(s);
  }
}

export default {
  data() {
    return {
      items: ['Cheese', 'Mushroom', 'Peppers', 'Olives'],
      selected: new Set(),
    };
  },
  computed: {
    selectedList() {
      return [...this.selected].join(', ') || 'none';
    },
  },
  methods: {
    toggle(item, checked) {
      const s = new Set(this.selected);
      checked ? s.add(item) : s.delete(item);
      this.selected = s;
    },
  },
  template: `
    <div style="display:flex;flex-direction:column;gap:.5rem;">
      <uwc-checkbox
        v-for="item in items"
        :key="item"
        :label="item"
        :checked="selected.has(item)"
        @uwc-change="toggle(item, $event.detail.checked)">
      </uwc-checkbox>
      <small style="color:#64748b;margin-top:.25rem;">
        Selected: {{ selectedList }}
      </small>
    </div>
  `
};

Attributes

Name Type Default Description
checked — — Whether the checkbox is checked.
indeterminate — — Shows a dash (–) for partial selection.
value — — Value submitted with form. Default: on.
name — — Input name for form submission.
label — — Label text rendered beside the checkbox.
disabled — — Disable the checkbox.
invalid — — Mark as invalid (red border).
variant — — outlined | filled. Default: outlined.

Properties

Name Type Default Description
styles CSSResultGroup [styles] —
checked boolean false —
indeterminate boolean false —
value string 'on' —
name string | undefined — —
label string | undefined — —
disabled boolean false —
invalid boolean false —
variant CheckboxVariant 'outlined' —

Slots

Name Description
default Custom label content (overrides label attr).

Events

Name Type Description
uwc-change CustomEvent Fired when checked state changes. Detail: { checked, value }.

CSS Custom Properties

Name Default Description
--uwc-checkbox-size — Box size. Default: 1.125rem.
--uwc-checkbox-radius — Border radius.
--uwc-checkbox-bg — Background color (unchecked).
--uwc-checkbox-color — Accent color (checked state & border).
--uwc-checkbox-label-color — Label text color.
--uwc-checkbox-font-size — Label font size.

CSS Parts

Name Description
box The visual checkbox square.
label The label element.