Skip to content

RadioGroup-DEMO


vue
<fv-radioGroup v-model="value" label="Options:">
<div class="row-block">
  <fv-radio label="option1">Option1</fv-radio>
  <fv-radio label="option2">Option2</fv-radio>
</div>
<div class="row-block">
  <fv-radio label="option3">Option3</fv-radio>
</div>
</fv-radioGroup>

RadioGroup inline


vue
<fv-radioGroup v-model="value" label="Options:" inline>
  <fv-radio label="option1">Option1</fv-radio>
  <fv-radio label="option2">Option2</fv-radio>
</fv-radioGroup>

Radio Icon


vue
<fv-radio-group v-model="value"  label="Options:">
<div class="row-block">
  <fv-radio label="option1" icon="QuickNote">Option1</fv-radio>
  <fv-radio label="option2" icon="QuickNote">Option2</fv-radio>
  <fv-radio label="option3" icon="QuickNote">Option3</fv-radio>
</div>
</fv-radio-group>

Radio Icon Dark inline


vue
<fv-radio-group v-model="value"  label="Options:" theme="dark" inline @change="change">
  <fv-radio label="option1" icon="QuickNote">Option1</fv-radio>
  <fv-radio label="option2" icon="QuickNote">Option2</fv-radio>
  <fv-radio label="option3" icon="QuickNote">Option3</fv-radio>
</fv-radio-group>

Radio Icon Dark Disabled


vue
<fv-radio-group v-model="value"  label="Options:"  disabled>
<div class="row-block">
  <fv-radio label="option1" icon="QuickNote">Option1</fv-radio>
  <fv-radio label="option2" icon="QuickNote">Option2</fv-radio>
  <fv-radio label="option3" icon="QuickNote">Option3</fv-radio>
</div>
<div class="row-block">
  <fv-radio label="option4" icon="QuickNote">Option4</fv-radio>
  <fv-radio label="option5" icon="QuickNote">Option5</fv-radio>
  <fv-radio label="option6" icon="QuickNote">Option6</fv-radio>
</div>
</fv-radio-group>

Properties


PropertyTypeRequiredDefaultDescription
modelValueanyYesundefinedSee the RadioGroup modelValue option.
themestringNo'global'Theme color.
labelstringNo''See the RadioGroup label option.
disabledbooleanNofalseWhether the component is disabled.
inlinebooleanNofalse
langstringNo"global"See the RadioGroup lang option.

Events


EventArgumentsDescription
changeevent(value,...)See the component change option.

MIT Licensed