Radio

Base input element to toggle an option on and off.
stableView sourceRadix Themes
vue
<script setup lang="ts">
import { ref } from 'vue'
import { Radio } from '@typlog/ui'

const checked = ref('1')
</script>

<template>
  <div class="flex flex-col gap-2">
    <label class="flex items-center gap-2">
      <Radio v-model="checked" value="1" />
      <span>Default layout</span>
    </label>
    <label class="flex items-center gap-2">
      <Radio v-model="checked" value="2" />
      <span>Simple layout</span>
    </label>
    <label class="flex items-center gap-2">
      <Radio v-model="checked" value="3" />
      <span>Compact layout</span>
    </label>
  </div>
</template>

API Reference ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the Theme.

highContrast
–
boolean

Uses a higher contrast color for the component.

modelValue
–
any
size"2"
"1""2""3"

Control the size of the radio.

variant"surface"
"soft""surface"

The visual variant to apply.

Examples ​

Size ​

vue
<script setup lang="ts">
import { ref } from 'vue'
import { Radio } from '@typlog/ui'

const checked = ref(true)
</script>

<template>
  <div class="flex items-center gap-2">
    <Radio v-model="checked" size="1" />
    <Radio v-model="checked" size="2" />
    <Radio v-model="checked" size="3" />
  </div>
</template>