Inkline
Radio
Radio inputs allow the user to select one option from a set of options.
Typically, there should not be too many options. Make sure you use a select input if you think the user doesn't need to see all the available options side-by-side.
You will need to use the i-radio component together with a i-radio-group.
Basic Usage
Radio Group
<i-radio-group v-model="selected">
<i-radio value="Football">Football</i-radio>
<i-radio value="Voleyball">Voleyball</i-radio>
<i-radio value="Basketball">Basketball</i-radio>
<i-radio value="Tennis" disabled>Tennis</i-radio>
</i-radio-group>
export default {
data () {
return {
selected: 'Football'
};
}
}
Selected value:
FootballSizes
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.
Radio Sizes
<i-radio-group v-model="selected">
<i-radio size="sm" value="Football">Football</i-radio>
<i-radio size="md" value="Volleyball">Tennis</i-radio>
<i-radio size="lg" value="Basketball">Basketball</i-radio>
</i-radio-group>
export default {
data () {
return {
selected: ['Basketball']
};
}
}
Applying the size size property to a i-radio-group will set the chosen size to all of its child inputs.
Radio Group Sizes
<i-radio-group size="sm" v-model="selected">
<i-radio value="Football">Football</i-radio>
<i-radio value="Volleyball">Tennis</i-radio>
<i-radio value="Basketball">Basketball</i-radio>
<i-radio value="Tennis" disabled>Tennis</i-radio>
</i-radio-group>
<i-radio-group size="md" v-model="selected">
<i-radio value="Football">Football</i-radio>
<i-radio value="Volleyball">Tennis</i-radio>
<i-radio value="Basketball">Basketball</i-radio>
<i-radio value="Tennis" disabled>Tennis</i-radio>
</i-radio-group>
<i-radio-group size="lg" v-model="selected">
<i-radio value="Football">Football</i-radio>
<i-radio value="Volleyball">Tennis</i-radio>
<i-radio value="Basketball">Basketball</i-radio>
<i-radio value="Tennis" disabled>Tennis</i-radio>
</i-radio-group>
export default {
data () {
return {
selected: ['Basketball']
};
}
}
Custom vs. Native
Inkline uses custom radio designs by setting the custom property to true by default.
Custon Radio Input
<i-radio-group v-model="selectedCustomTrue">
<i-radio :custom="true" value="Football">Football</i-radio>
<i-radio :custom="true" value="Volleyball">Tennis</i-radio>
<i-radio :custom="true" value="Basketball">Basketball</i-radio>
</i-radio-group>
export default {
data () {
return {
selected: ['Basketball']
};
}
}
By setting the custom property to false, the radios use the browser's default design.
Native Radio Input
<i-radio-group v-model="selected">
<i-radio :custom="false" value="Football">Football</i-radio>
<i-radio :custom="false" value="Volleyball">Tennis</i-radio>
<i-radio :custom="false" value="Basketball">Basketball</i-radio>
</i-radio-group>
export default {
data () {
return {
selected: ['Basketball']
};
}
}
Radio Buttons
You can display your radio inputs as toggleable buttons using the provided <i-radio-button> and <i-radio-button-group> components.
Radio Button Group
<i-radio-button-group v-model="selected">
<i-radio-button value="Earth">Earth</i-radio-button>
<i-radio-button value="Mars">Mars</i-radio-button>
<i-radio-button value="Jupiter">Jupiter</i-radio-button>
<i-radio-button value="Venus" disabled>Venus</i-radio-button>
</i-radio-button-group>
export default {
data () {
return {
selected: 'Earth'
};
}
}
Component API
Here you can find a list of the various customization options you can use for the radio components as props, as well as available slots and events.
Radio API
Property custom
Type
BooleanAccepted
true, falseDefault
trueDescription Sets the styling of the radio form component to custom or native.
Property disabled
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the radio form component as disabled.
Property indeterminate
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the radio form component as indeterminate.
Property readonly
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the radio form component as readonly.
Property schema
Type
ObjectDescription Provides a schema binding to the radio form component. See the Form Validation documentation.
Property size
Type
StringAccepted
sm, md, lgDefault
mdDescription Sets the size of the radio form component.
Property value
Type
StringDescription Sets the value of the radio form component.
Slot default
Description Slot for radio form component label.
Event click
Type
(event: Event) => {}Description Emitted when radio form component is clicked.
Event focus
Type
(event: Event) => {}Description Emitted when radio form component is focused.
Event blur
Type
(event: Event) => {}Description Emitted when radio form component is blurred.
Event input
Type
(value: String) => {}Description Emitted when radio form component value changes.
Radio Group API
Property disabled
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the radio form group component as disabled.
Property readonly
Type
BooleanAccepted
true, falseDefault
falseDescription Sets the state of the radio form group component as readonly.
Property size
Type
StringAccepted
sm, md, lgDefault
mdDescription Sets the size of the radio form group component.
Property value
Type
StringDescription Sets the value of the radio form group component. To be provided using the
v-model directive.Slot default
Description Slot for radio form group component default content.
Event focus
Type
(event: Event) => {}Description Emitted when a child radio form component is focused.
Event blur
Type
(event: Event) => {}Description Emitted when a child radio form component is blurred.
Event input
Type
(value: String) => {}Description Emitted when radio 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.
Radio
Property $form-check-radio-border-radius
Default
100%Property $form-check-radio-icon-size-base
Default
8pxProperty $form-check-radio-icon-size
Default
size-map($form-check-radio-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;
}