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


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


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

Component API

Here you can find a list of the various customization options you can use for the checkbox components as props, as well as available slots and events.

Checkbox API
Checkbox Group API

Sass Variables

Here you can find a list of the Sass variables you can use for the checkbox and radio components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.