Win7 UI

# Radio

Represents a single choice from a set of mutually exclusive choices

# Usage

<template>
  <div>
    <winui-radio id="radio_basic1" name="radio_basic">Yes</winui-radio>
    <winui-radio id="radio_basic2" name="radio_basic">No</winui-radio>
  </div>
</template>

# Props

# id required

  • Type: string
  • Default: undefined

The id of the radio. Required to bind the label to the input, must be unique in the whole page.

# name required

  • Type: string
  • Default: undefined

The name of the radio. Required to bind the radio to a group of radios.

# nativeValue optional

  • Type: number | string | boolean
  • Default: undefined

The value of the radio, used to match against the value prop.

# value optional

  • Type: number | string | boolean
  • Default: undefined

The value that determines whether the radio is checked.

# disabled optional

  • Type: boolean
  • Default: undefined

The radio state. If true, the radio will be disabled.

# Customization

Use the class name .winui-radio to override/customize the component's styles.

# Examples

# Disabled state

<template>
  <div>
    <winui-radio id="radio_d1" name="radio_d">Yes</winui-radio>
    <winui-radio id="radio_d2" name="radio_d">No</winui-radio>
    <winui-radio id="radio_d3" name="radio_d" disabled>Not sure</winui-radio>
  </div>
</template>

# Handling two-way binding

Your preferred mode: auto
<template>
  <div>
    <winui-radio
      id="radio_light"
      name="radio_mode"
      nativeValue="light"
      v-model="mode"
    >
      Light
    </winui-radio>
    <winui-radio
      id="radio_dark"
      name="radio_mode"
      nativeValue="dark"
      v-model="mode"
    >
      Dark
    </winui-radio>
    <winui-radio
      id="radio_auto"
      name="radio_mode"
      nativeValue="auto"
      v-model="mode"
    >
      Auto
    </winui-radio>
    <div>Your preferred mode: {{ mode }}</div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      mode: "auto",
    };
  },
};
</script>

← Searchbox →