Checkbox

Checkbox inputs allow the user to select multiple options from a set.

Using the i-checkbox component together with a i-checkbox-group allows you to control multiple values using a single binding.

Basic Usage

Basic Checkbox

Checkbox Group

Checkbox Group

Sizes

You're able to use the size property to control the size of your inputs, using one of the available sizes: sm, md, and lg. The default size is set to md.

Checkbox Sizes

Applying the size size property to a i-checkbox-group will set the chosen size to all of its child inputs.

Checkbox Group Size

Custom vs. Native

Inkline uses custom checkbox designs by setting the custom property to true by default.

Custom Checkbox

Indeterminate

You can set the state of a <i-checkbox> to be indeterminate by setting the indeterminate property to true.

Indeterminate Checkbox

Checkbox Buttons

You can display your checkbox inputs as toggleable buttons using the provided <i-checkbox-button> and <i-checkbox-button-group> components.

Checkbox Buttons

API

Checkbox API <i-checkbox>
Property Description Type Accepted Default
custom Sets the styling of the checkbox form component to custom or native. Boolean true, false true
disabled Sets the state of the checkbox form component as disabled. Boolean true, false false
indeterminate Sets the state of the checkbox form component as indeterminate. Boolean true, false false
readonly Sets the state of the checkbox form component as readonly. Boolean true, false false
schema Provides a schema binding to the checkbox form component. See the Form Validation documentation. Object
size Sets the size of the checkbox form component. String sm, md, lg md
value Sets the value of the checkbox form component. Can be also provided using a v-model directive when the checkbox isn't grouped. Boolean, String
Checkbox Group API <i-checkbox-group>
Property Description Type Accepted Default
disabled Sets the state of the checkbox form group component as disabled. Boolean true, false false
readonly Sets the state of the checkbox form group component as readonly. Boolean true, false false
size Sets the size of the checkbox form group component. String sm, md, lg md
value Sets the value of the checkbox form group component. To be provided using the v-model directive. Array<String> []