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>.

Name	Type	Description
checked	boolean	Sets or retrieves the current state of the component
disabled	boolean	Similar to readonly, but with a blur on the component
form	string	Associates this component to a form. Form id needs to be passed. If no Id informed, then it will be associated with the ancestor form
readonly	boolean	If 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
...
}

2. 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

• W3C Component Aria Practices