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:

<i-checkbox v-model="checked">Apple</i-checkbox>

Disabled State

You can disable a checkbox using the disabled property.

<i-checkbox v-model="checked" disabled>Apple</i-checkbox>

Readonly State

You can make a checkbox readonly using the readonly property.

<i-checkbox v-model="checked" readonly>Apple</i-checkbox>

Indeterminate State

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

<i-checkbox v-model="checked" indeterminate>Apple</i-checkbox>

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.

<i-checkbox v-model="checked" size="sm">Small</i-checkbox>

<i-checkbox v-model="checked" size="md">Medium</i-checkbox>

<i-checkbox v-model="checked" size="lg">Large</i-checkbox>

Color Variants

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

<i-checkbox v-model="checked" color="light">Light</i-checkbox>

<i-checkbox v-model="checked" color="dark">Dark</i-checkbox>

Group Example

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

<i-checkbox-group v-model="checked">
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

Group Disabled State

You can disable an entire checkbox group using the disabled property.

<i-checkbox-group v-model="checked" disabled>
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

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.

<i-checkbox-group v-model="checked" size="sm">
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

<i-checkbox-group v-model="checked" size="md">
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

<i-checkbox-group v-model="checked" size="lg">
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

Group Color Variants

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

<i-checkbox-group v-model="checked" color="light">
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

<i-checkbox-group v-model="checked" color="dark">
    <i-checkbox value="apple">Apple</i-checkbox>
    <i-checkbox value="banana">Banana</i-checkbox>
    <i-checkbox value="strawberry">Strawberry</i-checkbox>
    <i-checkbox value="mango">Mango</i-checkbox>
</i-checkbox-group>

Custom vs. Native

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

<i-checkbox v-model="checked" native>Apple</i-checkbox>

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