Radio

Default

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

Code copied

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

<script lang="ts" setup>
import { ref } from 'vue'

const picked = ref(1)
</script>

Color

Use the color prop to change the base color of a component and supported child elements. See theme configuration for color and theme details.

Supported values:

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

Code copied

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

<script lang="ts" setup>

const picked = ref(2)
</script>
<style scoped lang="scss">
.center {

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

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

<script lang="ts" setup>
import { ref } from 'vue'

const picked = ref(1)
</script>

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

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

<script lang="ts" setup>
import { ref } from 'vue'

const picked = ref(1)
</script>

Icon New

Add an icon inside the radio with the icon slot

Code copied

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

<script lang="ts" setup>
import { ref } from 'vue'

const picked = ref(1)
</script>

API