Checkbox

bo-checkbox wraps a native checkbox input with Bamboo styling, labels, helper text, and an indeterminate state.

Usage

Use v-model for the boolean checked state. The model defaults to false.

Accept the terms

Checked: false

<bo-checkbox v-model="accepted" label="Accept the terms" />

States and Sizes

Set indeterminate to show the mixed state. disabled, required, hint, and error are reflected on the native input. Sizes are sm, default, and lg.

Selected

Disabled

Indeterminate

Invalid

Choose an option

<bo-checkbox v-model="accepted" label="Selected" />
<bo-checkbox label="Disabled" disabled />
<bo-checkbox v-model="indeterminate" label="Indeterminate" indeterminate />
<bo-checkbox label="Invalid" error="Choose an option" />

The default slot can provide custom label content when label is not enough.

Accessibility

The control is a native checkbox associated with its generated label. Error text is exposed through aria-describedby and invalid state through aria-invalid.

API Reference

Props

Prop	Type	Default	Description
id	string	Autogenerated	Id of the native input.
dataTestId	string	Autogenerated	Test id of the input.
modelValue	boolean	false	Checked state used by v-model.
disabled	boolean	false	Disables the input.
name	string	-	Native form name.
value	string	-	Native submitted value.
indeterminate	boolean	false	Shows the mixed state.
label	string	-	Visible label text.
size	'sm' | 'default' | 'lg'	default	Checkbox size.
required	boolean	false	Marks the input as required.
hint	string	-	Helper text shown when there is no error.
error	string	-	Error text and invalid state.
role	HTMLAttributes['role']	-	Optional ARIA role for the input.
ariaLabel	string	-	Accessible name for the input.
ariaDescribedBy	string	-	Id of an external description.

Events

Event	Payload	Description
update:modelValue	boolean	Emitted when the checked state changes.

Slots

Name	Description
default	Custom content in the label area.