Radio

<dv-radio name="radio-1" /> <dv-radio name="radio-1" />
vue

import { ref } from 'vue';

export default {
  setup: () => {
    const val = ref('a');
    const onChange = (e) => {
      val.value = e.target.value;
    };
    return () => (
      <>
        <dv-radio
          checked={val.value === 'a'}
          onChange={onChange}
          name="radio-2"
          value="a"
        />
        <dv-radio
          checked={val.value === 'b'}
          onChange={onChange}
          name="radio-2"
          value="b"
        />
      </>
    );
  },
};
tsx

export default {
  setup: () => {
    const types = ['neutral', 'primary', 'secondary', 'accent'];
    return () => (
      <div class="flex flex-col items-center space-y-4">
        {types.map((type) => (
          <div key={type} class="w-32">
            <dv-radio variant={type}>{type}</dv-radio>
          </div>
        ))}
      </div>
    );
  },
};
tsx

export default {
  setup: () => {
    const types = ['xs', 'sm', 'md', 'lg'];
    return () => (
      <div class="flex flex-col items-center space-y-4">
        {types.map((size) => (
          <div key={size}>
            <dv-radio size={size} />
          </div>
        ))}
      </div>
    );
  },
};
tsx

import { ref } from 'vue';

export default {
  setup: () => {
    const options = [
      { value: 'apple', label: 'Apple' },
      { value: 'pear', label: 'Pear' },
      { value: 'orange', label: 'Orange' },
    ];
    const value = ref('apple');
    const disabled = ref(false);

    return () => (
      <div>
        <div class="flex items-center">
          <label class="mr-4">Disabled:</label>
          <dv-toggle
            checked={disabled.value}
            onChange={(e) => (disabled.value = e.target.checked)}
          />
        </div>
        <dv-divider />
        <dv-radio-group
          size="lg"
          options={options}
          disabled={disabled.value}
          v-model={value.value}
        />
      </div>
    );
  },
};
tsx