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

Using the ICheckbox component to determine a boolean value is very straightforward:

Disabled State

You can disable a checkbox using the disabled property.

Readonly State

You can make a checkbox readonly using the readonly property.

Indeterminate State

You can set the state of a <ICheckbox> to be indeterminate by using the indeterminate property.

Color Variants

You can use the color property to set a light or dark color for your checkboxes.

Size Variants

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

Custom vs. Native

Inkline uses a custom checkbox design by default. You can use the native property to use native browser checkbox indicators.




Design Tokens