KRadioButton link to current page

develop | Release notes

Overview
#

A radio button is used to make a single selection from a group of options. Radio buttons should be used instead of checkboxes if only one option can be selected.

KRadioButton's are always be wrapped in KRadioButtonGroup.

Usage
#

Current value: val-b


      <KRadioButtonGroup>
        <KRadioButton
          v-model="exampleValue"
          label="Option A"
          buttonValue="val-a"
        />
        <KRadioButton
          v-model="exampleValue"
          label="Option B"
          butonValue="val-b"
        />
        <KRadioButton
          v-model="exampleValue"
          label="Option C"
          description="This one is special!"
          buttonValue="val-c"
        />
        <KRadioButton
          v-model="exampleValue"
          label="Truncated label. Adjusting your browser window size to see this in action."
          buttonValue="val-d"
          truncateLabel
        />
      </KRadioButtonGroup>

With grid layout

It is possible to use radio buttons together with grid layout components such as KGrid or KFixedGrid. For example:

Current value: val-b


      <KRadioButtonGroup>
        <KFixedGrid :numCols="2">
          <KFixedGridItem :span="1">
            <KRadioButton
              v-model="exampleValue"
              label="Option A"
              buttonValue="val-a"
            />
            <KRadioButton
              v-model="exampleValue"
              label="Option B"
              buttonValue="val-b"
            />
          </KFixedGridItem>
          <KFixedGridItem :span="1">
            <KRadioButton
              v-model="exampleValue"
              label="Option C"
              description="This one is special!"
              buttonValue="val-c"
            />
            <KRadioButton
              v-model="exampleValue"
              label="Truncated label. Adjusting your browser window size to see this in action."
              buttonValue="val-d"
              truncateLabel
            />
          </KFixedGridItem>
        </KFixedGrid>
      </KRadioButtonGroup>

Layout
#

  • Align with container margin
  • Stack vertically in lists
  • Avoid nesting radio buttons

Label
#

  • Labels should be short and concise
  • Labels should be positioned above the radio button group

Guidelines
#

  • Always wrap KRadioButton group in KRadioButtonGroup
  • There must always be exactly one radio button selected within a group
  • If the user is allowed to not select any of the options, provide a "None" option
  • By default, the first radio option is selected, but may be configured to have any option preselected

Related
#

  • KRadioButtonGroup ensures KRadioButton groups are accessible in all supported browsers.

Props
#

Name Description Type Default Required
label
#
Text label
 string null —
showLabel
#
Whether or not to show the label
 boolean true —
labelDir
#
RTL dir of the text label Options: 'auto', 'ltr', 'rtl', null.
 string 'auto' —
v-model
#
Component data with which to associate this radio button and its siblings
 string|number|boolean — true
buttonValue
#
Unique value that will be assigned to v-model data when this radio button is selected
 string|number|boolean null —
value
#
(DEPRECATED)
 string|number|boolean null —
description
#
If provided, description underneath label text
 string null —
disabled
#
Whether or not the field is disabled
 boolean false —
autofocus
#
Whether or not to auto-focus on mount
 boolean false —
truncateLabel
#
Whether or not to truncate label
 boolean false —

Events
#

Name Description
keydown
#
Emitted with keydown events
change
#
Emitted on each change with new boolean of button state
input
#
Used to set buttonValue to v-model when checked
blur
#
Emits blur event, useful for validation

Slots
#

Name Description
default
#
Optional slot as alternative to label prop

Methods
#

Name Description
toggleCheck
#
Toggles the check state of the radio button.
focus
#
Puts keyboard focus on the radiobutton
setTabIndex
#
Sets tab-index on input