Checkbox

Use Checkbox to let a shopper pick one or more options from a list or mark a single item as selected. It renders a labeled checkbox with an optional secondary description.

Import

import { Checkbox } from '/@dropins/tools/components.js';

Props

Prop	Type	Req?	Description
name	string	Yes	Field name, used to map the value in a form.
label	string | VNode | VNode[]	No	Label for the checkbox.
description	string | VNode | VNode[]	No	Additional secondary description. Accepts a string or nodes.
size	'medium' | 'large'	No	Size of the label and description text. Defaults to medium.
disabled	boolean	No	Disable the checkbox. Defaults to false.
error	boolean	No	Render the error state. Defaults to false.

Checkbox also accepts standard input HTML attributes (for example, checked, value, and onChange), except size and label.

Example

Render a checkbox with a label, a description, and a change handler.

import { Checkbox, provider } from '/@dropins/tools/components.js';

await provider.render(Checkbox, {
  name: 'newsletter',
  label: 'Sign me up for the newsletter',
  description: 'Optional description text goes here.',
  onChange: (event) => yourUpdateSubscription(event.currentTarget.checked),
})(document.querySelector('.checkbox'));

Related

• RadioButton — for selecting a single option from a set.
• Field — wrap form controls with labels and validation.