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

Agrega el input de tipo radio con el componente <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

Usa la propiedad color para cambiar el color base del componente y algunos de los componentes hijos, para entender mejor el manejo de los colores y temas puedes verlo aqui

los valores permitidos son:

• 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

Agrega un label al radio con el slot default, si necesitas que el label este antes de el radio puedes usar la propiedad label-before

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

Agrega una animación de cargando al componente, cuando el radio tiene activa esta propiedad es como si estuviera en 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

Agrega un icono dentro de el radio con el slot icon

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