Radio

Radio

Default

Documentation Vuesax 4.0+

These documents refer to the latest version of vuesax (4.0+), to see the documents of the previous versions you can do it here 👉 Vuesax 3.x

Add the radio type input with the component <vs-radio />

Code copied

Color

Use the color property to change the base color of the component and some of the child components, to better understand the handling of colors and themes you can see ithere

Allowed values ​​are:

  • primary
  • success
  • danger
  • warning
  • dark
  • RGB
  • HEX
Code copied

Label New

Add a label to the radio with the default slot, if you need the label to be before the radio you can use the label-before property

Code copied

Loading New

Add a loading animation to the component, when the radio has this property active it is as if it were in disabled

Code copied

Icon New

Add an icon inside the radio with the icon slot

Code copied

API

props

Property Type Values Description default Example More
color String Vuesax Colors RGB HEX Change the color of the radio. primary Usage Open Close
<vs-radio success v-model="picked" val="2">
  Success
</vs-radio>
disabled Boolean truefalse Determine if the component is in the disabled state. false Usage Open Close
<vs-radio disabled v-model="picked" val="3">
  Option C
</vs-radio>
loading Boolean truefalse Determine if the component has a loading animation and is disabled. false Usage Open Close
<vs-radio loading v-model="picked" val="1">
  Option 1
</vs-radio>
val String String Determine the value of the radio input. Usage Open Close
<vs-radio v-model="picked" val="1">
  Option A
</vs-radio>

slots

Property Type Values Description default Example More
default slot Add a label to the component. Usage Open Close
<vs-radio v-model="picked" val="1">
  Label
</vs-radio>
icon slot Add an icon inside the radio. Usage Open Close
<vs-radio v-model="picked" val="1">
  Yen
  <template #icon>
    <i class='bx bx-yen' ></i>
  </template>
</vs-radio>
Last Updated: 2/10/2020, 2:21:50 AM