Radio
Radio inputs allow the user to select multiple options from a set.
Basic Example
Using the i-radio
component together with a i-radio-group
allows you to choose a value from multiple choices using a single model binding:
Disabled State
You can disable a radio using the disabled
property.
Readonly State
You can make a radio readonly using the readonly
property.
Size Variants
You’re able to use the size
property to control the size of your radio, using one of the available sizes: sm
, md
, and lg
. The default size is set to md
.
Group Disabled State
You can disable an entire radio group using the disabled
property.
Group Size Variants
You’re able to use the size
property to control the size of your radio 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.
Group Color Variants
You can use the color
property to set a light
or dark
color for your radios.
Custom vs. Native
Inkline uses a custom radio design by default. You can use the native
property to use native browser radio indicators.
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 radio - Property
disabled
TypeBoolean
Defaultfalse
Description The disabled state of the radio - Property
indeterminate
TypeBoolean
Defaultfalse
Description The indeterminate state of the radio - Property
value
TypeAny
Default''
Description Used to set the radio value when used inside a radio group - Property
modelValue
TypeAny
Defaultfalse
Description Used to set the radio value when used by itself - Property
name
TypeString
Defaultuid()
Description The unique identifier of the radio - Property
native
TypeBoolean
Defaultfalse
Description Displays the native browser radio input indicator - Property
readonly
TypeBoolean
Defaultfalse
Description The readonly state of the radio - Property
size
Type'sm' | 'md' | 'lg'
Default'md'
Description The size variant of the radio - Property
tabindex
TypeNumber | String
Default0
Description The tabindex of the radio
Slots
Use slots to insert custom content into well-defined component locations.
- Property
default
Description Slot for default radio 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 radio component indicator - Property
----background--checked
Valuecolor('primary')
Description The background of the radio component indicator when checked - Property
----background--disabled
Valuecolor('light-25')
Description The background of the radio component indicator when disabled - Property
----background--checked-disabled
Valuecolor('primary-25')
Description The background of the radio component indicator when checked and disabled - Property
----border-color
Valuecolor('light-55')
Description The border-color of the radio component indicator - Property
----border-color--checked
Valuecolor('primary-55')
Description The border-color of the radio component indicator when checked - Property
----border-color--disabled
Valuecolor('light')
Description The border-color of the radio component indicator when disabled - Property
----border-color--checked-disabled
Valuecolor('primary-30')
Description The border-color of the radio component indicator when checked and disabled - Property
----border-style
Valuevar(--border-style)
Description The border style of the radio component indicator - Property
----border-top-width
Valuevar(--border-top-width)
Description The border top width of the radio component indicator - Property
----border-right-width
Valuevar(--border-right-width)
Description The border right width of the radio component indicator - Property
----border-bottom-width
Valuevar(--border-bottom-width)
Description The border bottom width of the radio component indicator - Property
----border-left-width
Valuevar(--border-left-width)
Description The border left width of the radio 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 radio component indicator - Property
----border-top-left-radius
Value50%
Description The border top left radius of the radio component indicator - Property
----border-top-right-radius
Value50%
Description The border top right radius of the radio component indicator - Property
----border-bottom-right-radius
Value50%
Description The border bottom right radius of the radio component indicator - Property
----border-bottom-left-radius
Value50%
Description The border bottom left radius of the radio 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 radio component indicator - Property
----box-shadow-offset-x
Valuevar(--box-shadow-offset-x)
Description The box shadow horizontal offset of the radio component indicator - Property
----box-shadow-offset-y
Valuevar(--box-shadow-offset-y)
Description The box shadow vertical offset of the radio component indicator - Property
----box-shadow-blur-radius
Valuevar(--box-shadow-blur-radius)
Description The box shadow blur radius of the radio component indicator - Property
----box-shadow-spread-radius
Valuevar(--box-shadow-spread-radius)
Description The box shadow spread radius of the radio component indicator - Property
----box-shadow-color
Valuevar(--box-shadow-color)
Description The box shadow spread radius of the radio 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 radio component indicator - Property
----color
Valuecolor('white')
Description The color of the radio component indicator icon - Property
----color--disabled
Valuecolor('light-25')
Description The color of the radio component indicator icon when disabled - Property
----margin-right
Valuecalc(var(--margin-right) / 2)
Description The right margin of the radio component indicator - Property
----size
Value1rem
Description The size of the radio component indicator - Property
----checkmark--size
Value8px
Description The size of the radio component indicator check mark icon - Property
----label--font-size
Valuefont-size()
Description The font size of the radio component label - Property
----label--color
Valuecontrast-color($color-light)
Description The label color of the radio component label - Property
----label--color--disabled
Valuecolor('light-70')
Description The label color of the radio component when disabled