🌟  Exciting news! Try the new Inkline 4, production-ready and incredibly feature-packed.

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:

<i-radio-group v-model="checked">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

Disabled State

You can disable a radio using the disabled property.

<i-radio-group v-model="checked">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango" disabled>Mango</i-radio>
</i-radio-group>

Readonly State

You can make a radio readonly using the readonly property.

<i-radio-group v-model="checked">
    <i-radio value="apple" readonly>Apple</i-radio>
</i-radio-group>

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.

<i-radio-group v-model="checked">
    <i-radio value="small" size="sm">Small</i-radio>
    <i-radio value="medium" size="md">Medium</i-radio>
    <i-radio value="large" size="lg">Large</i-radio>
</i-radio-group>

Group Disabled State

You can disable an entire radio group using the disabled property.

<i-radio-group v-model="checked" disabled>
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

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.

<i-radio-group v-model="checked" size="sm">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

<i-radio-group v-model="checked" size="md">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

<i-radio-group v-model="checked" size="lg">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

Group Color Variants

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

<i-radio-group v-model="checked" color="light">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

<i-radio-group v-model="checked" color="dark">
    <i-radio value="apple">Apple</i-radio>
    <i-radio value="banana">Banana</i-radio>
    <i-radio value="strawberry">Strawberry</i-radio>
    <i-radio value="mango">Mango</i-radio>
</i-radio-group>

Custom vs. Native

Inkline uses a custom radio design by default. You can use the native property to use native browser radio indicators.

<i-radio-group v-model="checked">
    <i-radio value="apple" native>Apple</i-radio>
    <i-radio value="banana" native>Banana</i-radio>
    <i-radio value="strawberry" native>Strawberry</i-radio>
    <i-radio value="mango" native>Mango</i-radio>
</i-radio-group>

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