VueTailwind

# Radio Group

# Playground

Field status:
Field size:

Current value: 

Option 2

Rendered class: 

 
# Basic example
 
<t-radio-group
  v-model="model"
  name="radio-group"
  :options="[
    { value: 1, text: 'Option 1' },
    { value: 2, text: 'Option 2' }
  ]"
/>

# Props
 
Property Type Default value Accepted values
 
id String null Any valid type
 
disabled Boolean false Any valid type
 
name String null Any valid type
 
required Boolean false Any valid type
 
options Array / Object [] Any valid type
 
valueAttribute String undefined Any valid type
 
textAttribute String undefined Any valid type
 
status String / Boolean null true, false, 'success', 'error', 'warning'
 
size String null 'sm', 'lg'
  
Property Description
 
baseClass Base select box class (never changes)
 
defaultStatusClass Classes when select box doesnt has status and is not disabled
 
errorStatusClass Classes when select box has status of false or "error"
 
successStatusClass Classes when select box has status of true or "success"
 
warningStatusClass Classes when select has status of "warning"
 
disabledClass Classes when the select box is disabled
 
defaultSizeClass Classes when the select box has no defined size
 
largeSizeClass Classes when the select box has the size defined as large (lg)
 
smallSizeClass Classes when the select box has the size defined as small (sm)
 
# Options format
 
The component accepts the options in different formats:
 
# Array of objects
 
<!-- Value, text attributes (preferred default) -->
<t-radio-group :options="[{ value: 1, text: 'Option 1' }, { value: 2, text: 'Option 2' }]" />
<!-- id instead of value as attribute -->
<t-radio-group :options="[{ id: 1, text: 'Option 1' }, { id: 2, text: 'Option 2' }]" />
<!-- label instead of text as attribute -->
<t-radio-group :options="[{ value: 1, label: 'Option 1' }, { value: 2, label: 'Option 2' }]" />

<!-- All the examples above will render: -->
<div>
  <div>
    <input id="radio-field-0" name="radio-field" type="radio" value="1">
    <label for="radio-field-0">Option 1</label>
  </div>
  <div>
    <input id="radio-field-1" name="radio-field" type="radio" value="2">
    <label for="radio-field-1">Option 2</label>
  </div>
</div>

# Object with value:text pairs
 
<t-radio-group :options="{ A: 'Option A', B: 'Option B', C: 'Option C' }" />

<!-- Will Render: -->
<div>
  <div>
    <input id="radio-field-0" name="radio-field" type="radio" value="A">
    <label for="radio-field-0">Option A</label>
  </div>
  <div>
    <input id="radio-field-1" name="radio-field" type="radio" value="B">
    <label for="radio-field-1">Option B</label>
  </div>
  <div>
    <input id="radio-field-2" name="radio-field" type="radio" value="C">
    <label for="radio-field-2">Option C</label>
  </div>
</div>

# Array of strings
 
<t-radio-group :options="['Red', 'Blue', 'Yellow']" />

<!-- Will Render: -->
<div>
  <div>
    <input id="radio-field-0" name="radio-field" type="radio" value="Red">
    <label for="radio-field-0">Red</label>
  </div>
  <div>
    <input id="radio-field-1" name="radio-field" type="radio" value="Blue">
    <label for="radio-field-1">Blue</label>
  </div>
  <div>
    <input id="radio-field-2" name="radio-field" type="radio" value="Yellow">
    <label for="radio-field-2">Yellow</label>
  </div>
</div>

# Array of numbers
 
<t-radio-group :options="[18, 19, 20]" />

<!-- Will Render: -->
<div>
  <div>
    <input id="radio-field-0" name="radio-field" type="radio" value="18">
    <label for="radio-field-0">18</label>
  </div>
  <div>
    <input id="radio-field-1" name="radio-field" type="radio" value="19">
    <label for="radio-field-1">19</label>
  </div>
  <div>
    <input id="radio-field-2" name="radio-field" type="radio" value="20">
    <label for="radio-field-2">20</label>
  </div>
</div>

# Define the value/text attributes
 
<t-radio-group
  :options="[
    { key: 'A', description: 'One option' },
    { key: 'B', description: 'Another option' },
    { key: 'C', description: 'One more' },
  ]"
  value-attribute="key"
  text-attribute="description"
/>

<!-- Will Render: -->
<div>
  <div>
    <input id="radio-field-0" name="radio-field" type="radio" value="A">
    <label for="radio-field-0">One option</label>
  </div>
  <div>
    <input id="radio-field-1" name="radio-field" type="radio" value="B">
    <label for="radio-field-1">Another option</label>
  </div>
  <div>
    <input id="radio-field-2" name="radio-field" type="radio" value="C">
    <label for="radio-field-2">One more</label>
  </div>
</div>

# Events
 
Event Arguments Description
 
input String (The current value of the radio group) Emitted every time the value of the v-model change
 
change String (The current value of the radio group) Emitted every time the value of the v-model change
 
focus FocusEvent Emitted when the any of the options are focused
 
blur FocusEvent Emitted when the any of the options are blurred
 
 
 

      ←
       
        Button
      
      →