Radio Group

Set of interactive radio buttons where only one can be selected at a time.
stableView sourceRadix ThemesReka UI
vue
<script setup lang="ts">
import { ref } from 'vue'
import { RadioGroupRoot, RadioGroupItem } from '@typlog/ui'

const selected = ref<string>('1')
</script>

<template>
  <div class="flex">
    <RadioGroupRoot v-model="selected" class="flex flex-col gap-2">
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>
  </div>
</template>

API Reference ​

RadioGroupRoot ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the ThemeProvider.

highContrast
–
boolean

Uses a higher contrast color for the component.

size"2"
"1""2""3"

Control the size of the radio group.

variant"surface"
"soft""surface"

The visual variant of the radio group.

RadioGroupItem ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the RadioGroupRoot.

highContrast
–
boolean

Overrides the highContrast prop inherited from the RadioGroupRoot.

size
–
"1""2""3"

Overrides the size inherited from the RadioGroupRoot.

variant
–
"soft""surface"

Overrides the variant inherited from the RadioGroupRoot.

Examples ​

Size ​

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

const selected = ref<string>('1')
</script>

<template>
  <div class="flex flex-col gap-4">
    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      size="1"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      size="2"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      size="3"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>
  </div>
</template>

Variant ​

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

const selected = ref<string>('1')
</script>

<template>
  <div class="flex flex-col gap-4">
    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="surface"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>
  </div>
</template>

Color ​

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

const selected = ref<string>('1')
</script>

<template>
  <div class="flex flex-col gap-4">
    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
      color="gray"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
      color="green"
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
    >
      <RadioGroupItem color="violet" value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem color="crimson" value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem color="bronze" value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>
  </div>
</template>

High Contrast ​

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

const selected = ref<string>('1')
</script>

<template>
  <div class="flex flex-col gap-4">
    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
      color="gray"
      high-contrast
    >
      <RadioGroupItem value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
      high-contrast
    >
      <RadioGroupItem color="green" value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem color="orange" value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem color="red" value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>

    <RadioGroupRoot
      v-model="selected"
      class="flex flex-col gap-2"
      variant="soft"
      high-contrast
    >
      <RadioGroupItem color="jade" value="1">
        Default layout
      </RadioGroupItem>
      <RadioGroupItem color="iris" value="2">
        Simple layout
      </RadioGroupItem>
      <RadioGroupItem color="brown" value="3">
        Compact layout
      </RadioGroupItem>
    </RadioGroupRoot>
  </div>
</template>