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 />

Option A

Option B

Option C

Option D

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
        <vs-radio v-model="picked" val="1">
          Option A
        </vs-radio>
        <vs-radio v-model="picked" val="2">
          Option B
        </vs-radio>
        <vs-radio disabled v-model="picked" val="3">
          Option C
        </vs-radio>
        <vs-radio v-model="picked" val="4">
          Option D
        </vs-radio>
    </div>
  </template>

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

Primary

Success

Danger

Warning

Dark

HEX

RGB

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-radio v-model="picked" val="1">
        Primary
      </vs-radio>
      <vs-radio success v-model="picked" val="2">
        Success
      </vs-radio>
      <vs-radio danger v-model="picked" val="3">
        Danger
      </vs-radio>
      <vs-radio warn v-model="picked" val="4">
        Warning
      </vs-radio>
      <vs-radio dark v-model="picked" val="5">
        Dark
      </vs-radio>
      <vs-radio color="#7d33ff" v-model="picked" val="6">
        HEX
      </vs-radio>
      <vs-radio color="rgb(59,222,200)" v-model="picked" val="7">
        RGB
      </vs-radio>
    </div>
  </template>

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

Label

label Before

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-radio v-model="picked" val="1">
        Label
      </vs-radio>
      <vs-radio label-before v-model="picked" val="2">
        label Before
      </vs-radio>
    </div>
  </template>

Loading New

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

Option 1

Option 2

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-radio loading v-model="picked" val="1">
        Option 1
      </vs-radio>
      <vs-radio loading v-model="picked" val="2">
        Option 2
      </vs-radio>
    </div>
  </template>

Icon New

Add an icon inside the radio with the icon slot

Yen

Won

Pound

Euro

Rupee

Bitcoin

Dollar

Code copied

• Template
• Script
• All

  <template>
    <div class="center">
      <vs-radio v-model="picked" val="1">
        Yen
        <template #icon>
          <i class='bx bx-yen' ></i>
        </template>
      </vs-radio>
      <vs-radio v-model="picked" val="2">
        Won
        <template #icon>
          <i class='bx bx-won' ></i>
        </template>
      </vs-radio>
      <vs-radio v-model="picked" val="3">
        Pound
        <template #icon>
          <i class='bx bx-pound' ></i>
        </template>
      </vs-radio>
      <vs-radio v-model="picked" val="4">
        Euro
        <template #icon>
          <i class='bx bx-euro' ></i>
        </template>
      </vs-radio>
      <vs-radio v-model="picked" val="5">
        Rupee
        <template #icon>
          <i class='bx bx-rupee' ></i>
        </template>
      </vs-radio>
      <vs-radio v-model="picked" val="6">
        Bitcoin
        <template #icon>
          <i class='bx bx-bitcoin' ></i>
        </template>
      </vs-radio>
      <vs-radio v-model="picked" val="7">
        Dollar
        <template #icon>
          <i class='bx bx-dollar' ></i>
        </template>
      </vs-radio>
    </div>
  </template>

API