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