Skip to main content
Version: Current

Web Components - Checkbox

An implementation of a checkbox as a form-connected Web Component.

Set-up

import { provideDesignSystem, alphaCheckbox } from '@genesislcap/alpha-design-system';

provideDesignSystem().register(alphaCheckbox());

Attributes

You can define the following attributes in an <alpha-checkbox>.

NameTypeDescription
checkedbooleanSets or retrieves the current state of the component
disabledbooleanSimilar to readonly, but with a blur on the component
formstringAssociates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form
readonlybooleanIf true, the user cannot change the value of this checkbox (which is greyed out)

These attributes must be defined alongside the declaration of the component.

Usage

All examples below use the alpha-design-system. If you are using any other design system, change the declaration of this component accordingly.

  • Example 1: a checkbox named checkbox, which is greyed out
Example 1
<alpha-checkbox disabled>Checkbox</alpha-checkbox>
  • Example 2: a checkbox named checkbox, which is checked
Example 2
<alpha-checkbox checked="true">Checkbox</alpha-checkbox>

Get the user input

Once the user has input a value to this component, you need to make it accessible to the application:

  1. Create an @observable variable where you want to use this value:
import {... , observable} from '@genesislcap/web-core';
...
export class TEMPLATE extends GenesisElement {
...
@observable checkbox: boolean
...
}
  1. Use the sync function to insert the value from the component into the variable checkbox:
import {sync} from '@genesislcap/foundation-utils';
...
...
<alpha-checkbox :checked="${sync((x) => x.checkbox, 'boolean')}">checkbox number 1</alpha-checkbox>
...
...

From this point, you can access the value of the component in your application.

Try yourself

Live Editor
<alpha-checkbox>Click on me</alpha-checkbox>
Result
Loading...

Use cases

  • Multi-selection forms
  • Filtering
  • Sorting
  • To-Do lists
  • Privacy and consent

Additional resources