wt-radio.vue

Specs

Props

Name	Required	Types	Default	Description	Example	Deprecated
value	✅	union	-	Value, set by radio
label		string	''	Radio label text
required		boolean	false	Marks the radio as required
disabled		boolean	false	Disables the radio
outline		boolean	false	Changes visual style to outlined

Slots

Name	Scope	Description
label		Custom label markup

Example Radio

Radio 1

Radio 2

Code

<script setup>
import { ref } from 'vue';

const value1 = 'value1';
const value2 = 'value2';

const selected = ref(value1);
</script>

<template>
  <wt-radio
    v-model:selected="selected"
    :value="value1"
    label="Radio 1"
  />
  <wt-radio
    v-model:selected="selected"
    :value="value2"
    label="Radio 2"
  />
</template>

<style scoped lang="scss"></style>

Example Disabled Radio

Radio 1

Radio 2

Code

<script setup>
import { ref } from 'vue';

const value1 = 'value1';
const value2 = 'value2';

const selected = ref(value1);
</script>

<template>
  <wt-radio
    v-model:selected="selected"
    :value="value1"
    label="Radio 1"
    disabled
  />
  <wt-radio
    v-model:selected="selected"
    :value="value2"
    label="Radio 2"
    disabled
  />
</template>

<style scoped lang="scss"></style>