Checkbox
Checkbox inputs allow the user to select multiple options from a set.
Basic Example
Using the i-checkbox
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 <i-checkbox>
to be indeterminate by using the indeterminate
property.
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
.
Color Variants
You can use the color
property to set a light
or dark
color for your checkboxes.
Group Example
Using the i-checkbox
component together with a i-checkbox-group
allows you to control multiple selected values using a single binding.
Group Disabled State
You can disable an entire checkbox group using the disabled
property.
Group Size Variants
You’re able to use the size
property to control the size of your checkbox group, using one of the available sizes: sm
, md
, and lg
. The default size is set to md
.
The chosen size will be applied to all of its child inputs.
Group Color Variants
You can use the color
property to set a light
or dark
color for your checkboxes.
Custom vs. Native
Inkline uses a custom checkbox design by default. You can use the native
property to use native browser checkbox indicators.
Configuration
Props
Use props to modify the component’s design and behavior.
- Property
color
Type'light' | 'dark'
Default'light'
Description The color variant of the checkbox - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the checkbox - Property
indeterminate
TypeBoolean
Defaultfalse
Description The indeterminate state of the checkbox - Property
value
TypeAny
Defaultfalse
Description Used to set the checkbox value when used inside a checkbox group - Property
modelValue
TypeAny
Defaultfalse
Description Used to set the checkbox value when used by itself - Property
name
TypeString
Defaultuid()
Description The unique identifier of the checkbox - Property
native
TypeBoolean
Defaultfalse
Description Displays the native browser checkbox input indicator - Property
readonly
TypeBoolean
Defaultfalse
Description The readonly state of the checkbox - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the checkbox - Property
tabindex
TypeNumber | String
Default1
Description The tabindex of the checkbox
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default checkbox label
Events
Use events to react to something happening inside the component.
- Property
update:modelValue
Description Event emitted for setting the modelValue
CSS Variables
Read more about configuring Inkline’s Design System variables to update the look and feel of the component.
- Property
----background
Valuecolor('white')
Description The background of the checkbox component indicator - Property
----background--checked
Valuecolor('primary')
Description The background of the checkbox component indicator when checked - Property
----background--disabled
Valuecolor('light-25')
Description The background of the checkbox component indicator when disabled - Property
----background--checked-disabled
Valuecolor('primary-25')
Description The background of the checkbox component indicator when checked and disabled - Property
----border-color
Valuecolor('light-55')
Description The border-color of the checkbox component indicator - Property
----border-color--checked
Valuecolor('primary-55')
Description The border-color of the checkbox component indicator when checked - Property
----border-color--disabled
Valuecolor('light')
Description The border-color of the checkbox component indicator when disabled - Property
----border-color--checked-disabled
Valuecolor('primary-30')
Description The border-color of the checkbox component indicator when checked and disabled - Property
----border-style
Valuevar(--border-style)
Description The border style of the checkbox component indicator - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the checkbox component indicator - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the checkbox component indicator - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the checkbox component indicator - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the checkbox component indicator - Property
----border-width
Valuevar(----border-top-width) var(----border-right-width) var(----border-bottom-width) var(----border-left-width)
Description The border width of the checkbox component indicator - Property
----border-top-left-radius
Valuevar(--border-top-left-radius)
Description The border top left radius of the checkbox component indicator - Property
----border-top-right-radius
Valuevar(--border-top-right-radius)
Description The border top right radius of the checkbox component indicator - Property
----border-bottom-right-radius
Valuevar(--border-bottom-right-radius)
Description The border bottom right radius of the checkbox component indicator - Property
----border-bottom-left-radius
Valuevar(--border-bottom-left-radius)
Description The border bottom left radius of the checkbox component indicator - Property
----border-radius
Valuevar(----border-top-left-radius) var(----border-top-right-radius) var(----border-bottom-right-radius) var(----border-bottom-left-radius)
Description The border radius of the checkbox component indicator - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the checkbox component indicator - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the checkbox component indicator - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the checkbox component indicator - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the checkbox component indicator - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the checkbox component indicator - Property
----box-shadow
Valuevar(----box-shadow-offset-x) var(----box-shadow-offset-y) var(----box-shadow-blur-radius) var(----box-shadow-spread-radius) var(----box-shadow-color)
Description The box shadow of the checkbox component indicator - Property
----color
Valuecolor('white')
Description The color of the checkbox component indicator icon - Property
----color--disabled
Valuecolor('light-25')
Description The color of the checkbox component indicator icon when disabled - Property
----margin-right
Valuecalc(var(--margin-right) / 2)
Description The right margin of the checkbox component indicator - Property
----size
Value1rem
Description The size of the checkbox component indicator - Property
----checkmark--size
Value8px
Description The size of the checkbox component indicator check mark icon - Property
----label--font-size
Valuefont-size()
Description The font size of the checkbox component label - Property
----label--color
Valuecontrast-color($color-light)
Description The label color of the checkbox component label - Property
----label--color--disabled
Valuecolor('light-70')
Description The label color of the checkbox component when disabled