ba-checkbox

A form field for single and multiple selections

Figma

GitHub

Storybook

Live Demo

  <ba-checkbox
    label="Checkbox label"
    name="checkboxName"
    value="checkboxValue"
    required
  ></ba-checkbox>

Guidelines

This is when one, none or multiple options can be selected. If only one option can be selected from list of options, use ba-select or ba-radio-group instead.

Accessibility

Always use the label attribute to give a meaningful label to the field.

Code

Properties & Attributes

Property	Attribute	Description	Type	Default
`checked`	`checked`	If `true`, the checkbox is selected.	`boolean \| undefined`	`false`
`label`(required)	`label`	text displayed next to the checkbox	`string`	`undefined`
`name`(required)	`name`	The name of the control, which is submitted with the form data.	`string`	`undefined`
`required`	`required`	If `true`, the user must check the checkbox before submitting a form.	`boolean \| undefined`	`false`
`value`(required)	`value`	the value of the checkbox.	`string`	`undefined`

Events

Event	Description	Type
`baChange`	Emitted when the checked property has changed.	`CustomEvent<CheckboxChangeEventDetail>`

Methods

`isValid() => Promise<boolean>`

An exposed method for triggering the inputs required validation

`reset() => Promise<void>`

Resets the input back to its initial value

Returns

Type: Promise<void>

Usage

Basic usage

Basic example

  <ba-checkbox
    label="Checkbox label"
    name="checkboxName"
    value="checkboxValue"
    required
  ></ba-checkbox>