Checkbox
Component
Let the user select one or more options.
Related components: Dropdown, Form item, RadioComponent
<form>
<GoAFormItem label="Basic">
<GoACheckbox name="item" text="Item" value="" onChange={onChange}></GoACheckbox>
</GoAFormItem>
</form>Properties
namestringUnique name to identify the checkbox.
checkedbooleanMarks the checkbox item as selected.
textstringLabel shown beside the checkbox.
valuestringThe value binding.
descriptionstring | ReactNodeAdditional content shown below the label.
disabledbooleanDisable this control. It will not receive focus or events. Use [attr.disabled] with [formControl]. Defaults to
false.errorbooleanShows an error on the checkbox item. Defaults to
false.ariaLabelstringDefines 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) => voidCallback function when checkbox value is changed.
maxWidthstringSets the maximum width of the checkbox.
testIdstringSets the data-testid attribute. Used with ByTestId queries in tests.
mt,mr,mb,mlSpacing (none | 3xs | 2xs | xs | s | m | l | xl | 2xl | 3xl | 4xl)Apply margin to the top, right, bottom, and/or left of the component.
Examples
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>Book time in drop in hours