Checkbox

Let the user select one or more options.

Related components: Dropdown, Form item, Radio

<GoAFormItem label="Basic">
  <GoACheckbox name="item" text="Item" value="" onChange={onChange}></GoACheckbox>
</GoAFormItem>

name

string

Unique name to identify the checkbox.

checked

boolean

Marks the checkbox item as selected.

textstring

Label shown beside the checkbox.

valuestring

The value binding.

descriptionstring | ReactNode

Additional content shown below the label.

disabledboolean

Disable this control. It will not receive focus or events. Use [attr.disabled] with [formControl]. Defaults to false.

errorboolean

Shows an error on the checkbox item. Defaults to false.

ariaLabelstring

Defines how the text will be translated for the screen reader. If not specified it will fall back to the name.

onChange(name: string, checked: boolean, value: string) => void

Callback function when checkbox value is changed.

maxWidthstring

Sets the maximum width of the checkbox.

testIdstring

Sets the data-testid attribute. Used with ByTestId queries in tests.

mt,mr,mb,mlnone | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl

Apply margin to the top, right, bottom, and/or left of the component.

Use tags in the description

Help text with a link.

<GoAFormItem label="Select one or more options">
  <GoACheckbox
    checked={true}
    name="optionOne"
    text="Option one"
    description={<span>Help text with a <a href="#">link</a>.</span>}
    />
  <GoACheckbox checked={false} name="optionTwo" text="Option two" />
  <GoACheckbox checked={false} name="optionThree" text="Option three" />
</GoAFormItem>

Join design system drop in hours to get feedback on your service, propose new components or patterns, suggest changes to existing resources, ask questions, and give feedback to the design system. These sessions are for Government of Alberta product teams.
Book time in drop in hours

Checkbox

Component

Let the user select one or more options.

Component

Properties

Examples

Use tags in the description