Toggle

Toggles are boolean form components used for easily enabling or disabling features.

Basic Example

<i-toggle v-model="toggled">I accept the terms and conditions</i-toggle>

Readonly State

You can set the toggle input to be readonly by using the readonly property.

<i-toggle v-model="toggled" readonly>I accept the terms and conditions</i-toggle>

Disabled State

You can set the toggle input to be disabled by using the disabled property.

<i-toggle v-model="toggled" disabled>I accept the terms and conditions</i-toggle>

Size Variants

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.

<i-toggle v-model="toggled" size="sm">I accept the terms and conditions</i-toggle>

<i-toggle v-model="toggled" size="md">I accept the terms and conditions</i-toggle>

<i-toggle v-model="toggled" size="lg">I accept the terms and conditions</i-toggle>

Applying the size size property to an i-form-group will also set the chosen size to all of its i-toggle inputs.

Color Variants

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

<i-toggle v-model="toggled" color="light">I accept the terms and conditions</i-toggle>

<i-toggle v-model="toggled" color="dark">I accept the terms and conditions</i-toggle>

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
    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('light')
    Description The background of the toggle component
  • Property
    ----background--checked
    Valuecolor('primary')
    Description The background of the toggle component when checked
  • Property
    ----background--disabled
    Valuecolor('light-40')
    Description The background of the toggle component when disabled
  • Property
    ----background--checked-disabled
    Valuecolor('primary-25')
    Description The background of the toggle component when checked and disabled
  • Property
    ----border-color
    Valuecolor('light-55')
    Description The border-color of the toggle component
  • Property
    ----border-color--checked
    Valuecolor('primary-55')
    Description The border-color of the toggle component when checked
  • Property
    ----border-color--disabled
    Valuecolor('light')
    Description The border-color of the toggle component when disabled
  • Property
    ----border-color--checked-disabled
    Valuecolor('primary-30')
    Description The border-color of the toggle component when checked and disabled
  • Property
    ----border-style
    Valuevar(--border-style)
    Description The border style of the toggle component
  • Property
    ----border-top-width
    Valuevar(--border-top-width)
    Description The border top width of the toggle component
  • Property
    ----border-right-width
    Valuevar(--border-right-width)
    Description The border right width of the toggle component
  • Property
    ----border-bottom-width
    Valuevar(--border-bottom-width)
    Description The border bottom width of the toggle component
  • Property
    ----border-left-width
    Valuevar(--border-left-width)
    Description The border left width of the toggle component
  • 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 toggle component
  • Property
    ----border-top-left-radius
    Valuevar(----height)
    Description The border top left radius of the toggle component
  • Property
    ----border-top-right-radius
    Valuevar(----height)
    Description The border top right radius of the toggle component
  • Property
    ----border-bottom-right-radius
    Valuevar(----height)
    Description The border bottom right radius of the toggle component
  • Property
    ----border-bottom-left-radius
    Valuevar(----height)
    Description The border bottom left radius of the toggle component
  • 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 toggle component
  • Property
    ----box-shadow-offset-x
    Valuevar(--box-shadow-offset-x)
    Description The box shadow horizontal offset of the toggle component
  • Property
    ----box-shadow-offset-y
    Valuevar(--box-shadow-offset-y)
    Description The box shadow vertical offset of the toggle component
  • Property
    ----box-shadow-blur-radius
    Valuevar(--box-shadow-blur-radius)
    Description The box shadow blur radius of the toggle component
  • Property
    ----box-shadow-spread-radius
    Valuevar(--box-shadow-spread-radius)
    Description The box shadow spread radius of the toggle component
  • Property
    ----box-shadow-color
    Valuevar(--box-shadow-color)
    Description The box shadow spread radius of the toggle component
  • 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 toggle component
  • Property
    ----margin-right
    Valuevar(--margin-right)
    Description The right margin of the toggle component
  • Property
    ----margin-top
    Valuevar(--margin-right)
    Description The right margin of the toggle component
  • Property
    ----width
    Value40px
    Description The width of the toggle component
  • Property
    ----height
    Value20px
    Description The height of the toggle component
  • Property
    ----transition-duration
    Valuevar(--transition-duration)
    Description The transition duration of the toggle component
  • Property
    ----indicator--background
    Valuecolor('white')
    Description The background of the toggle component indicator
  • Property
    ----indicator--background--checked
    Valuevar(----indicator--background)
    Description The background of the toggle component indicator when checked
  • Property
    ----indicator--background--disabled
    Valuecolor('gray-05')
    Description The background of the toggle component indicator when disabled
  • Property
    ----indicator--background--checked-disabled
    Valuecolor('gray-10')
    Description The background of the toggle component indicator when checked and disabled
  • Property
    ----indicator--border-top-left-radius
    Value50%
    Description The border top left radius of the toggle component indicator
  • Property
    ----indicator--border-top-right-radius
    Value50%
    Description The border top right radius of the toggle component indicator
  • Property
    ----indicator--border-bottom-right-radius
    Value50%
    Description The border bottom right radius of the toggle component indicator
  • Property
    ----indicator--border-bottom-left-radius
    Value50%
    Description The border bottom left radius of the toggle component indicator
  • Property
    ----indicator--border-radius
    Valuevar(----indicator--border-top-left-radius) var(----indicator--border-top-right-radius) var(----indicator--border-bottom-right-radius) var(----indicator--border-bottom-left-radius)
    Description The border radius of the toggle component indicator
  • Property
    ----indicator--width
    Value16px
    Description The width of the toggle component indicator
  • Property
    ----indicator--height
    Value16px
    Description The height of the toggle component indicator
  • Property
    ----label--color
    Valuecontrast-color($color-light)
    Description The color of the toggle component label
  • Property
    ----label--color--disabled
    Valuecolor('light-70')
    Description The color of the toggle component label when disabled
  • Property
    ----label--font-size
    Valuefont-size()
    Description The font size of the toggle component label