Inkline
Checkbox
Checkbox inputs allow the user to select multiple options from a set.
Using the i-checkbox component together with a i-checkbox-group allows you to control multiple values using a single binding.
Basic Usage
Basic Checkbox
<i-checkbox v-model="checked">Apple</i-checkbox>
export default {
data () {
return {
checked: true
};
}
}
Checked: true
Checkbox Group
Checkbox Group
<i-checkbox-group v-model="checked">
<i-checkbox value="Football">Football</i-checkbox>
<i-checkbox value="Volleyball">Volleyball</i-checkbox>
<i-checkbox value="Basketball">Basketball</i-checkbox>
<i-checkbox value="Snowboarding">Snowboarding</i-checkbox>
<i-checkbox value="Tennis" disabled>Tennis</i-checkbox>
</i-checkbox-group>
export default {
data () {
return {
checked: ['Football', 'Basketball', 'Tennis']
};
}
}
Checked values:
[
"Football",
"Basketball",
"Tennis"
]Sizes
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.
Checkbox Sizes
<i-checkbox-group v-model="checked">
<i-checkbox size="sm" value="Football">Football</i-checkbox>
<i-checkbox size="md" value="Volleyball">Tennis</i-checkbox>
<i-checkbox size="lg" value="Basketball">Basketball</i-checkbox>
</i-checkbox-group>
export default {
data () {
return {
checked: ['Basketball']
};
}
}
Applying the size size property to a i-checkbox-group will set the chosen size to all of its child inputs.
Checkbox Group Size
<i-checkbox-group size="sm" v-model="checked">
<i-checkbox value="Football">Football</i-checkbox>
<i-checkbox value="Volleyball">Volleyball</i-checkbox>
<i-checkbox value="Basketball">Basketball</i-checkbox>
<i-checkbox value="Tennis" disabled>Tennis</i-checkbox>
</i-checkbox-group>
<i-checkbox-group size="md" v-model="checked">
<i-checkbox value="Football">Football</i-checkbox>
<i-checkbox value="Volleyball">Volleyball</i-checkbox>
<i-checkbox value="Basketball">Basketball</i-checkbox>
<i-checkbox value="Tennis" disabled>Tennis</i-checkbox>
</i-checkbox-group>
<i-checkbox-group size="lg" v-model="checked">
<i-checkbox value="Football">Football</i-checkbox>
<i-checkbox value="Volleyball">Volleyball</i-checkbox>
<i-checkbox value="Basketball">Basketball</i-checkbox>
<i-checkbox value="Tennis" disabled>Tennis</i-checkbox>
</i-checkbox-group>
export default {
data () {
return {
checked: ['Basketball', 'Tennis']
};
}
}
Custom vs. Native
Inkline uses custom checkbox designs by setting the custom property to true by default.
Custom Checkbox
<i-checkbox-group v-model="checkedCustomTrue">
<i-checkbox :custom="true" value="Football">Football</i-checkbox>
<i-checkbox :custom="true" value="Volleyball">Tennis</i-checkbox>
<i-checkbox :custom="true" value="Basketball">Basketball</i-checkbox>
</i-checkbox-group>
export default {
data () {
return {
checked: ['Basketball']
};
}
}
Indeterminate
You can set the state of a <i-checkbox> to be indeterminate by setting the indeterminate property to true.
Indeterminate Checkbox
<i-checkbox :indeterminate="true">Football</i-checkbox>
export default {
data () {
return {
checked: ['Basketball']
};
}
}
Checkbox Buttons
You can display your checkbox inputs as toggleable buttons using the provided <i-checkbox-button> and <i-checkbox-button-group> components.
Checkbox Buttons
<i-checkbox-button-group v-model="checked">
<i-checkbox-button value="Earth">Earth</i-checkbox-button>
<i-checkbox-button value="Mars">Mars</i-checkbox-button>
<i-checkbox-button value="Jupiter">Jupiter</i-checkbox-button>
<i-checkbox-button value="Venus" disabled>Venus</i-checkbox-button>
</i-checkbox-button-group>
export default {
data () {
return {
checked: ['Earth']
};
}
}
Component API
Here you can find a list of the various customization options you can use for the checkbox components as props, as well as available slots and events.
Checkbox API
Property custom
Type
BooleanAccepted
true, falseDefault
trueDescription Sets the styling of the checkbox form component to custom or native.
Property disabled
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the checkbox form component as disabled.
Property indeterminate
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the checkbox form component as indeterminate.
Property readonly
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the checkbox form component as readonly.
Property schema
Type
ObjectDescription Provides a schema binding to the checkbox form component. See the Form Validation documentation.
Property size
Type
StringAccepted
sm, md, lgDefault
mdDescription Sets the size of the checkbox form component.
Property value
Type
Boolean, StringDescription Sets the value of the checkbox form component. Can be also provided using a
v-model directive when the checkbox isn't grouped.Slot default
Description Slot for checkbox form component label.
Event click
Type
(event: Event) => {}Description Emitted when checkbox form component is clicked.
Event focus
Type
(event: Event) => {}Description Emitted when checkbox form component is focused.
Event blur
Type
(event: Event) => {}Description Emitted when checkbox form component is blurred.
Event input
Type
(value: Boolean | String) => {}Description Emitted when checkbox form component value changes.
Checkbox Group API
Property disabled
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the checkbox form group component as disabled.
Property readonly
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the checkbox form group component as readonly.
Property size
Type
StringAccepted
sm, md, lgDefault
mdDescription Sets the size of the checkbox form group component.
Property value
Type
Array<String>Default
[]Description Sets the value of the checkbox form group component. To be provided using the
v-model directive.Slot default
Description Slot for checkbox form group component default content.
Event focus
Type
(event: Event) => {}Description Emitted when a child checkbox form component is focused.
Event blur
Type
(event: Event) => {}Description Emitted when a child checkbox form component is blurred.
Event input
Type
(value: Boolean | String) => {}Description Emitted when checkbox form group component value changes.
Sass Variables
Here you can find a list of the Sass variables you can use for the checkbox and radio components. If you're looking to find common variables that these rely on, you should take a look at the Sass Variables page.
Checkbox
Property $form-check-checkbox-border-radius
Default
$border-radiusProperty $form-check-checkbox-icon-size-base
Default
8pxProperty $form-check-checkbox-icon-size
Default
size-map($form-check-checkbox-icon-size-base, $sizes, $size-multipliers)
Checkable
Property $form-check-disabled-color
Default
$text-mutedProperty $form-check-margin-right
Default
$spacerProperty $form-check-indicator-color
Default
$color-blackProperty $form-check-indicator-checked-color
Default
$color-whiteProperty $form-check-indicator-active-color
Default
$color-whiteProperty $form-check-indicator-disabled-color
Default
$color-gray-30Property $form-check-indicator-checked-background-color
Default
$color-primaryProperty $form-check-indicator-active-background-color
Default
$color-primaryProperty $form-check-indicator-disabled-background-color
Default
$color-gray-40Property $form-check-indicator-disabled-checked-background-color-light
Default
$color-gray-40Property $form-check-indicator-disabled-checked-background-color-dark
Default
$color-gray-60Property $form-check-indicator-size
Default
1remProperty $form-check-indicator-gutter
Default
spacers('1/2')Property $form-check-indicator-margin-normalize
Default
$form-check-indicator-size / 4Property $form-check-indicator-box-shadow
Default
0 0 0 1px rgba($color-black, 0.2), inset 0 0.25rem 0.25rem rgba($color-black, 0.1)Property $form-check-indicator-focused-box-shadow
Default
0 0 0 1px $body-background, 0 0 0.2rem 0.2rem rgba($color-primary, 0.33)Property $form-check-indicator-checked-box-shadow
Default
noneProperty $form-check-indicator-active-box-shadow
Default
noneProperty $form-check-indicator-background-size
Default
0.5remProperty $checkable-color-for-light-variant
Default
$color-for-light-variantProperty $checkable-color-for-dark-variant
Default
$color-for-dark-variantProperty $checkable-variant-{variant}
Default
checkable-variant($color-{variant})Property $checkable-variants
Default
(
light: $checkable-variant-light,
dark: $checkable-variant-dark
)
Function checkable-variant
Default
@function checkable-variant($variant) {
$checkable-variant-indicator-background: $variant;
$checkable-variant-indicator-color: $color-black;
$checkable-variant-indicator-checked-color: $color-white;
$checkable-variant-indicator-active-color: $color-white;
$checkable-variant-indicator-disabled-color: $color-gray-30;
$checkable-variant-indicator-checked-background-color: $color-primary;
$checkable-variant-indicator-active-background-color: $color-primary;
$checkable-variant-indicator-disabled-background-color: $color-gray-40;
$checkable-variant-indicator-disabled-checked-background-color: variant-color-by-luminance($variant, $color-gray-40, $color-gray-60);
$checkable-variant-indicator-box-shadow: 0 0 0 1px rgba($color-black, 0.2), inset 0 0.25rem 0.25rem rgba($color-black, 0.1) !default;
$checkable-variant-indicator-focused-box-shadow: 0 0 0 1px $body-background, 0 0 0.2rem 0.2rem rgba($color-primary, 0.33) !default;
$checkable-variant-indicator-checked-box-shadow: none !default;
$checkable-variant-indicator-active-box-shadow: none !default;
$checkable-variant-indicator-background-size: 0.5rem !default;
$variant-map: (
indicator-background: $checkable-variant-indicator-background,
indicator-color: $checkable-variant-indicator-color,
indicator-checked-color: $checkable-variant-indicator-checked-color,
indicator-active-color: $checkable-variant-indicator-active-color,
indicator-disabled-color: $checkable-variant-indicator-disabled-color,
indicator-checked-background-color: $checkable-variant-indicator-checked-background-color,
indicator-active-background-color: $checkable-variant-indicator-active-background-color,
indicator-disabled-background-color: $checkable-variant-indicator-disabled-background-color,
indicator-disabled-checked-background-color: $checkable-variant-indicator-disabled-checked-background-color,
indicator-box-shadow: $checkable-variant-indicator-box-shadow,
indicator-focused-box-shadow: $checkable-variant-indicator-focused-box-shadow,
indicator-checked-box-shadow: $checkable-variant-indicator-checked-box-shadow,
indicator-active-box-shadow: $checkable-variant-indicator-active-box-shadow,
indicator-background-size: $checkable-variant-indicator-background-size
);
@return $variant-map;
}