Checkbox

Use cases:

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

Any use where the user is to give a boolean type input choice.

Example

Checkbox:

Default checkbox

Checkbox with slotted label

Check me!

Disabled checkbox

Genesis

Declaration

<rapid-checkbox></rapid-checkbox>

Usage

@customElement({
  name: 'my-element',
  template: html`
    <rapid-checkbox
      ?disabled="${(x) => x.disabled}"
      ?checked="${sync((x) => x.isSelected, 'boolean')}"
      @change="${(x, ctx) => x.checkChanged(ctx.event)}"
    >Checkbox
    </rapid-checkbox>
  `,
})
export class MyElement extends GenesisElement {
  @observable disabled = false;
  @observable isSelected = false;
  checkChanged(e: Event) {
    this.isSelected = e.event.checked;
    console.log(this.isSelected); // sync value updated
    console.log(e.event.checked); // equivalent to sync value
  }
}

React

Declaration

<rapid-checkbox></rapid-checkbox>

Usage

export function MyComponent() {
  const [checkboxValue, setCheckboxState] = useState(false);
  const handleCheckboxChange = (event) => {
    setCheckboxState(!!event.target.checked);
    console.log({ checkboxValue })
  };

  const [disabled, setDisabled] = useState(false);

  return (
    <rapid-checkbox disabled={disabled} onChange={handleCheckboxChange}>Checkbox</rapid-checkbox>
  );
}

Angular

Declaration

<rapid-checkbox></rapid-checkbox>

Usage

import { Component, CUSTOM_ELEMENTS_SCHEMA } from '@angular/core';
@Component({
  selector: 'my-root',
  template: `
    <rapid-checkbox
      name="isSelected"
      [disabled]="isDisabled"
      [checked]="isSelected"
      (change)="onCheckboxChange($event)"
    >Checkbox</rapid-checkbox>
  `,
  styleUrls: ['./my.component.css'],
  standalone: true,
  schemas: [CUSTOM_ELEMENTS_SCHEMA],
})
export class AppComponent {
  isDisabled: boolean = false;
  isSelected: boolean = false;
  onCheckboxChange(event: Event) {
    const target = event.target as HTMLInputElement;
    this.isSelected = target.checked;
  }
}

DOM API

Property and attribute binding examples for Genesis Component syntax. Closing tag omitted.

Attributes

Attribute	Type	Use	Example
checked	boolean	The boolean value of whether the checkbox is checked. Use the sync utility to allow for data from from the template back to the model.	<rapid-checkbox ?checked="${sync((x) => x.isSelected, 'boolean')}">
readonly	boolean	Configures the component so the user cannot alter the state via the web browser.	<rapid-checkbox readonly>
disabled	boolean	Same functionality as readonly, and additionally greys out the component.	<rapid-checkbox disabled>
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.	<rapid-checkbox form="myForm">

Properties

This component doesn't have any properties which are not also controlled via attributes.

Slots

Slot	Use
Default	The default slot for the label.
checked-indicator	The checked-state indicator.
indicator-indicator	The indeterminate (non-checked) indicator.

Parts

Part	Use
control	The element representing the visual checkbox control.
label	The label text.

Fired Events

Event	Type	Use	Example
change	boolean	Emits a custom change event when the checked state changes. Access the value on the event via .target.checked.	<rapid-checkbox @change="${(x) => x.myChangeHandler(event)}">

Listened events

This component doesn't listen to any events.

Info

Further details

This component is an implementation of an HTML checkbox element.