import{_ as i}from"./plugin-vue_export-helper-DlAUqK2U.js";import{c as l,a,b as n,d as e,o as t}from"./app-h9l50wZ_.js";const d={};function p(r,s){return t(),l("div",null,s[0]||(s[0]=[a(`

Basic usage

<ds-radio :options="['blue', 'red', 'green']" />

Usage with label

<ds-radio
  label="Color"
  :options="['blue', 'red', 'green']" />

Bind to a value

Use v-model to bind a value to the select input.

<template>
  <div>
    <ds-radio
      v-model="color"
      :options="['blue', 'red', 'green']"
      placeholder="Color ..."></ds-radio>
    <ds-text>Your color: {{ color }}</ds-text>
  </div>
</template>
<script>
  export default {
    data() {
      return {
        color: 'blue'
      }
    }
  }
</script>

Style variations

<ds-radio
  label="Color"
  :options="['blue', 'red', 'green']"
  buttons />

Validation

`,10),n("p",null,[e("We use "),n("a",{href:"https://github.com/yiminghe/async-validator",targe:"_blank"},"async-validator schemas"),e(" for validation.")],-1),a(`

If you need to validate more than one field it is better to use the form component.

<template>
  <div>
    <ds-radio
      v-model="color"
      :options="['blue', 'red', 'green']"
      :schema="{type: 'enum', enum: ['green'], message: 'Please choose green :)' }"
      placeholder="Color ..." />
  </div>
</template>
<script>
  export default {
    data() {
      return {
        color: ''
      }
    }
  }
</script>
`,2)]))}const u=i(d,[["render",p],["__file","demo.html.vue"]]),v=JSON.parse(`{"path":"/styleguide/src/system/components/data-input/Radio/demo.html","title":"","lang":"en-US","frontmatter":{},"headers":[{"level":2,"title":"Basic usage","slug":"basic-usage","link":"#basic-usage","children":[]},{"level":2,"title":"Usage with label","slug":"usage-with-label","link":"#usage-with-label","children":[]},{"level":2,"title":"Bind to a value","slug":"bind-to-a-value","link":"#bind-to-a-value","children":[]},{"level":2,"title":"Style variations","slug":"style-variations","link":"#style-variations","children":[]},{"level":2,"title":"Validation","slug":"validation","link":"#validation","children":[]}],"git":{"createdTime":1775351521000,"updatedTime":1775351521000,"contributors":[{"name":"dependabot[bot]","email":"49699333+dependabot[bot]@users.noreply.github.com","commits":1}]},"readingTime":{"minutes":0.49,"words":147},"filePathRelative":"styleguide/src/system/components/data-input/Radio/demo.md","localizedDate":"April 5, 2026","excerpt":"

Basic usage

\\n
<ds-radio :options=\\"['blue', 'red', 'green']\\" />
\\n
"}`);export{u as comp,v as data};