Toggle
Toggles are boolean form components used for easily enabling or disabling features.
Basic Example
Readonly State
You can set the toggle input to be readonly by using the readonly
property.
Disabled State
You can set the toggle input to be disabled by using the disabled
property.
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
.
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.
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