Radio Tabs

Set of interactive radio buttons where only one can be selected at a time.
alphaView source
vue
<script setup lang="ts">
import { ref } from 'vue'
import { RadioTabsRoot, RadioTabsItem } from '@typlog/ui'

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

<template>
  <div class="flex items-center">
    <RadioTabsRoot v-model="selected" color="gray">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>
  </div>
</template>

API Reference ​

RadioTabsRoot ​

PropDefaultType
color
–
Color

Overrides the accent color inherited from the ThemeProvider.

radius
–
"none""small""medium""large""full"

Overrides the radius inherited from the ThemeProvider.

size"2"
"1""2"

Control the size of the radio tabs.

variant"classic"
"soft""surface""classic"

The visual variant of the radio tabs.

RadioTabsItem ​

Examples ​

Size ​

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

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

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

    <RadioTabsRoot v-model="selected" size="2">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>
  </div>
</template>

Variant ​

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

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

<template>
  <div class="flex flex-col gap-4">
    <RadioTabsRoot v-model="selected" variant="classic">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" variant="surface">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" variant="soft">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>
  </div>
</template>

Color ​

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

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

<template>
  <div class="flex flex-col gap-4">
    <RadioTabsRoot v-model="selected" color="gray">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" color="green">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" color="crimson">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>
  </div>
</template>

Radius ​

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

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

<template>
  <div class="flex flex-col gap-4">
    <RadioTabsRoot v-model="selected" radius="none">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" radius="small">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" radius="medium">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" radius="large">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>

    <RadioTabsRoot v-model="selected" radius="full">
      <RadioTabsItem value="1">
        Default
      </RadioTabsItem>
      <RadioTabsItem value="2">
        Simple
      </RadioTabsItem>
      <RadioTabsItem value="3">
        Compact
      </RadioTabsItem>
    </RadioTabsRoot>
  </div>
</template>