Vinicunca

RadioGroup

RadioGroupGitHub
A set of radio buttons to select a single option from a list.

Usage

Use the v-model directive to control the value of the RadioGroup or the default-value prop to set the initial value when you do not need to control its state.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>

<template>
  <PRadioGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>

<template>
  <PRadioGroup v-model="value" :items="items" />
</template>

Items

Use the items prop as an array of strings or numbers:

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>

<template>
  <PRadioGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
const value = ref('System')
</script>

<template>
  <PRadioGroup v-model="value" :items="items" />
</template>

You can also pass an array of objects with the following properties:

  • label?: string
  • description?: string
  • value?: string
  • disabled?: boolean
  • icon?: string
  • class?: any
  • ui?: { item?: ClassNameValue, container?: ClassNameValue, base?: ClassNameValue, 'indicator'?: ClassNameValue, wrapper?: ClassNameValue, label?: ClassNameValue, icon?: ClassNameValue, description?: ClassNameValue }

Matches your device settings.

Always uses the light theme.

Always uses the dark theme.

<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    value: 'dark'
  }
])
const value = ref('system')
</script>

<template>
  <PRadioGroup v-model="value" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    value: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    value: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    value: 'dark'
  }
])
const value = ref('system')
</script>

<template>
  <PRadioGroup v-model="value" :items="items" />
</template>
When using objects, you need to reference the value property of the object in the v-model directive or the default-value prop.

Value Key

You can change the property that is used to set the value by using the value-key prop. Defaults to value.

Matches your device settings.

Always uses the light theme.

Always uses the dark theme.

<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    id: 'dark'
  }
])
const value = ref('light')
</script>

<template>
  <PRadioGroup v-model="value" value-key="id" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    description: 'Matches your device settings.',
    id: 'system'
  },
  {
    label: 'Light',
    description: 'Always uses the light theme.',
    id: 'light'
  },
  {
    label: 'Dark',
    description: 'Always uses the dark theme.',
    id: 'dark'
  }
])
const value = ref('light')
</script>

<template>
  <PRadioGroup v-model="value" value-key="id" :items="items" />
</template>

Legend

Use the legend prop to set the legend of the RadioGroup.

Theme
<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup legend="Theme" default-value="System" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup legend="Theme" default-value="System" :items="items" />
</template>

Color

Use the color prop to change the color of the RadioGroup.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup color="neutral" default-value="System" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup color="neutral" default-value="System" :items="items" />
</template>

Variant

Use the variant prop to change the variant of the RadioGroup.

<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    value: 'system',
    description: 'Matches your device settings.'
  },
  {
    label: 'Light',
    value: 'light',
    description: 'Always uses the light theme.'
  },
  {
    label: 'Dark',
    value: 'dark',
    description: 'Always uses the dark theme.'
  }
])
</script>

<template>
  <PRadioGroup color="primary" variant="card" default-value="system" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    value: 'system',
    description: 'Matches your device settings.'
  },
  {
    label: 'Light',
    value: 'light',
    description: 'Always uses the light theme.'
  },
  {
    label: 'Dark',
    value: 'dark',
    description: 'Always uses the dark theme.'
  }
])
</script>

<template>
  <PRadioGroup color="primary" variant="card" default-value="system" :items="items" />
</template>

Size

Use the size prop to change the size of the RadioGroup.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup size="xl" variant="list" default-value="System" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup size="xl" variant="list" default-value="System" :items="items" />
</template>

Orientation

Use the orientation prop to change the orientation of the RadioGroup. Defaults to vertical.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup orientation="horizontal" variant="list" default-value="System" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup orientation="horizontal" variant="list" default-value="System" :items="items" />
</template>

Indicator

Use the indicator prop to change the position or hide the indicator. Defaults to start.

An item's icon is only displayed when indicator is hidden, above the label, since a radio has no icon inside its indicator.
<script setup lang="ts">
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    icon: 'i-lucide-monitor',
    value: 'System',
    class: 'w-20'
  },
  {
    label: 'Light',
    icon: 'i-lucide-sun',
    value: 'Light',
    class: 'w-20'
  },
  {
    label: 'Dark',
    icon: 'i-lucide-moon',
    value: 'Dark',
    class: 'w-20'
  }
])
</script>

<template>
  <PRadioGroup
    indicator="hidden"
    orientation="horizontal"
    variant="table"
    default-value="System"
    :items="items"
  />
</template>
<script setup lang="ts">
import { ref } from 'vue'
import type { RadioGroupItem } from 'pohon-ui'

const items = ref<RadioGroupItem[]>([
  {
    label: 'System',
    icon: 'i-lucide-monitor',
    value: 'System',
    class: 'w-20'
  },
  {
    label: 'Light',
    icon: 'i-lucide-sun',
    value: 'Light',
    class: 'w-20'
  },
  {
    label: 'Dark',
    icon: 'i-lucide-moon',
    value: 'Dark',
    class: 'w-20'
  }
])
</script>

<template>
  <PRadioGroup
    indicator="hidden"
    orientation="horizontal"
    variant="table"
    default-value="System"
    :items="items"
  />
</template>

Disabled

Use the disabled prop to disable the RadioGroup.

<script setup lang="ts">
const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup disabled default-value="System" :items="items" />
</template>
<script setup lang="ts">
import { ref } from 'vue'

const items = ref(['System', 'Light', 'Dark'])
</script>

<template>
  <PRadioGroup disabled default-value="System" :items="items" />
</template>

API

Props

Prop Default Type

Slots

Slot Type

Emits

Event Type

Theme

app.config.ts
export default defineAppConfig({
  ui: {
    radioGroup: {
      slots: {
        root: 'relative',
        fieldset: 'flex gap-x-2',
        legend: 'mb-1 block font-500 color-text',
        item: 'flex items-start',
        container: 'flex items-center',
        base: 'rounded-full ring ring-inset ring-border-accented overflow-hidden focus-visible:outline-none',
        indicator: 'flex size-full items-center justify-center after:content-empty after:rounded-full after:bg-background',
        wrapper: 'w-full',
        label: 'block font-500 color-text',
        icon: 'shrink-0',
        description: 'color-text-muted'
      },
      variants: {
        color: {
          primary: {
            indicator: 'bg-primary'
          },
          secondary: {
            indicator: 'bg-secondary'
          },
          success: {
            indicator: 'bg-success'
          },
          info: {
            indicator: 'bg-info'
          },
          warning: {
            indicator: 'bg-warning'
          },
          error: {
            indicator: 'bg-error'
          },
          neutral: {
            indicator: 'bg-background-inverted'
          }
        },
        variant: {
          list: {
            fieldset: 'flex-wrap',
            item: ''
          },
          card: {
            fieldset: 'flex-wrap',
            item: [
              'border border-border rounded-lg hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-elevated/50',
              'transition-colors'
            ]
          },
          table: {
            item: [
              'border border-border hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-elevated/50',
              'transition-colors'
            ]
          }
        },
        orientation: {
          horizontal: {
            fieldset: 'flex-row'
          },
          vertical: {
            fieldset: 'flex-col'
          }
        },
        indicator: {
          start: {
            item: 'flex-row',
            wrapper: 'ms-2'
          },
          end: {
            item: 'flex-row-reverse',
            wrapper: 'me-2'
          },
          hidden: {
            base: 'sr-only',
            wrapper: 'flex flex-col items-center gap-1 text-center'
          }
        },
        size: {
          xs: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs',
            base: 'size-3',
            item: 'text-xs',
            container: 'h-4',
            indicator: 'after:size-1'
          },
          sm: {
            fieldset: 'gap-y-0.5',
            legend: 'text-xs',
            base: 'size-3.5',
            item: 'text-xs',
            container: 'h-4',
            indicator: 'after:size-1'
          },
          md: {
            fieldset: 'gap-y-1',
            legend: 'text-sm',
            base: 'size-4',
            item: 'text-sm',
            container: 'h-5',
            indicator: 'after:size-1.5'
          },
          lg: {
            fieldset: 'gap-y-1',
            legend: 'text-sm',
            base: 'size-4.5',
            item: 'text-sm',
            container: 'h-5',
            indicator: 'after:size-1.5'
          },
          xl: {
            fieldset: 'gap-y-1.5',
            legend: 'text-base',
            base: 'size-5',
            item: 'text-base',
            container: 'h-6',
            indicator: 'after:size-2'
          }
        },
        highlight: {
          true: '',
          false: ''
        },
        disabled: {
          true: {
            item: 'opacity-75',
            base: 'cursor-not-allowed',
            label: 'cursor-not-allowed',
            description: 'cursor-not-allowed'
          }
        },
        required: {
          true: {
            legend: "after:color-error after:ms-0.5 after:content-['*']"
          }
        }
      },
      compoundVariants: [
        {
          indicator: 'hidden',
          class: {
            container: 'h-auto'
          }
        },
        {
          variant: [
            'card',
            'table'
          ],
          highlight: false,
          class: {
            item: 'hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:border-border-accented hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:z-1'
          }
        },
        {
          size: 'xs',
          indicator: 'hidden',
          class: {
            icon: 'size-3'
          }
        },
        {
          size: 'sm',
          indicator: 'hidden',
          class: {
            icon: 'size-3.5'
          }
        },
        {
          size: 'md',
          indicator: 'hidden',
          class: {
            icon: 'size-4'
          }
        },
        {
          size: 'lg',
          indicator: 'hidden',
          class: {
            icon: 'size-4.5'
          }
        },
        {
          size: 'xl',
          indicator: 'hidden',
          class: {
            icon: 'size-5'
          }
        },
        {
          size: 'xs',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'p-2.5'
          }
        },
        {
          size: 'sm',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'p-3'
          }
        },
        {
          size: 'md',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'p-3.5'
          }
        },
        {
          size: 'lg',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'p-4'
          }
        },
        {
          size: 'xl',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'p-4.5'
          }
        },
        {
          orientation: 'horizontal',
          variant: 'table',
          class: {
            item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
            fieldset: 'gap-0 -space-x-px'
          }
        },
        {
          orientation: 'vertical',
          variant: 'table',
          class: {
            item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
            fieldset: 'gap-0 -space-y-px'
          }
        },
        {
          color: 'primary',
          variant: 'list',
          indicator: [
            'start',
            'end'
          ],
          class: {
            base: 'outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary'
          }
        },
        {
          color: 'neutral',
          variant: 'list',
          indicator: [
            'start',
            'end'
          ],
          class: {
            base: 'outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted'
          }
        },
        {
          color: 'primary',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
          }
        },
        {
          color: 'neutral',
          variant: [
            'card',
            'table'
          ],
          class: {
            item: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
          }
        },
        {
          color: 'primary',
          variant: 'list',
          indicator: 'hidden',
          class: {
            item: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
          }
        },
        {
          color: 'neutral',
          variant: 'list',
          indicator: 'hidden',
          class: {
            item: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
          }
        },
        {
          color: 'primary',
          variant: 'card',
          class: {
            item: 'has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10'
          }
        },
        {
          color: 'neutral',
          variant: 'card',
          class: {
            item: 'has-data-[state=checked]:border-border-inverted/50 has-data-[state=checked]:bg-background-elevated'
          }
        },
        {
          color: 'primary',
          variant: 'table',
          class: {
            item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-2'
          }
        },
        {
          color: 'neutral',
          variant: 'table',
          class: {
            item: 'has-data-[state=checked]:bg-background-elevated has-data-[state=checked]:border-border-inverted/50 has-data-[state=checked]:z-2'
          }
        },
        {
          variant: [
            'card',
            'table'
          ],
          disabled: true,
          class: {
            item: 'cursor-not-allowed'
          }
        },
        {
          color: 'primary',
          indicator: 'hidden',
          highlight: true,
          class: {
            item: '[&:not(:has(:disabled))]:border-primary [&:not(:has(:disabled)):has([data-state=checked])]:border-primary'
          }
        },
        {
          color: 'neutral',
          indicator: 'hidden',
          highlight: true,
          class: {
            item: '[&:not(:has(:disabled))]:border-border-inverted [&:not(:has(:disabled)):has([data-state=checked])]:border-border-inverted'
          }
        },
        {
          color: 'primary',
          highlight: true,
          class: {
            base: 'ring-primary'
          }
        },
        {
          color: 'neutral',
          highlight: true,
          class: {
            base: 'ring-border-inverted'
          }
        }
      ],
      defaultVariants: {
        highlight: false,
        size: 'md',
        color: 'primary',
        variant: 'list',
        indicator: 'start'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from 'pohon-ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        radioGroup: {
          slots: {
            root: 'relative',
            fieldset: 'flex gap-x-2',
            legend: 'mb-1 block font-500 color-text',
            item: 'flex items-start',
            container: 'flex items-center',
            base: 'rounded-full ring ring-inset ring-border-accented overflow-hidden focus-visible:outline-none',
            indicator: 'flex size-full items-center justify-center after:content-empty after:rounded-full after:bg-background',
            wrapper: 'w-full',
            label: 'block font-500 color-text',
            icon: 'shrink-0',
            description: 'color-text-muted'
          },
          variants: {
            color: {
              primary: {
                indicator: 'bg-primary'
              },
              secondary: {
                indicator: 'bg-secondary'
              },
              success: {
                indicator: 'bg-success'
              },
              info: {
                indicator: 'bg-info'
              },
              warning: {
                indicator: 'bg-warning'
              },
              error: {
                indicator: 'bg-error'
              },
              neutral: {
                indicator: 'bg-background-inverted'
              }
            },
            variant: {
              list: {
                fieldset: 'flex-wrap',
                item: ''
              },
              card: {
                fieldset: 'flex-wrap',
                item: [
                  'border border-border rounded-lg hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-elevated/50',
                  'transition-colors'
                ]
              },
              table: {
                item: [
                  'border border-border hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:bg-background-elevated/50',
                  'transition-colors'
                ]
              }
            },
            orientation: {
              horizontal: {
                fieldset: 'flex-row'
              },
              vertical: {
                fieldset: 'flex-col'
              }
            },
            indicator: {
              start: {
                item: 'flex-row',
                wrapper: 'ms-2'
              },
              end: {
                item: 'flex-row-reverse',
                wrapper: 'me-2'
              },
              hidden: {
                base: 'sr-only',
                wrapper: 'flex flex-col items-center gap-1 text-center'
              }
            },
            size: {
              xs: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs',
                base: 'size-3',
                item: 'text-xs',
                container: 'h-4',
                indicator: 'after:size-1'
              },
              sm: {
                fieldset: 'gap-y-0.5',
                legend: 'text-xs',
                base: 'size-3.5',
                item: 'text-xs',
                container: 'h-4',
                indicator: 'after:size-1'
              },
              md: {
                fieldset: 'gap-y-1',
                legend: 'text-sm',
                base: 'size-4',
                item: 'text-sm',
                container: 'h-5',
                indicator: 'after:size-1.5'
              },
              lg: {
                fieldset: 'gap-y-1',
                legend: 'text-sm',
                base: 'size-4.5',
                item: 'text-sm',
                container: 'h-5',
                indicator: 'after:size-1.5'
              },
              xl: {
                fieldset: 'gap-y-1.5',
                legend: 'text-base',
                base: 'size-5',
                item: 'text-base',
                container: 'h-6',
                indicator: 'after:size-2'
              }
            },
            highlight: {
              true: '',
              false: ''
            },
            disabled: {
              true: {
                item: 'opacity-75',
                base: 'cursor-not-allowed',
                label: 'cursor-not-allowed',
                description: 'cursor-not-allowed'
              }
            },
            required: {
              true: {
                legend: "after:color-error after:ms-0.5 after:content-['*']"
              }
            }
          },
          compoundVariants: [
            {
              indicator: 'hidden',
              class: {
                container: 'h-auto'
              }
            },
            {
              variant: [
                'card',
                'table'
              ],
              highlight: false,
              class: {
                item: 'hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:border-border-accented hover:[&:not(:has(:disabled,[aria-disabled=true],:focus-visible,[data-state=checked]))]:z-1'
              }
            },
            {
              size: 'xs',
              indicator: 'hidden',
              class: {
                icon: 'size-3'
              }
            },
            {
              size: 'sm',
              indicator: 'hidden',
              class: {
                icon: 'size-3.5'
              }
            },
            {
              size: 'md',
              indicator: 'hidden',
              class: {
                icon: 'size-4'
              }
            },
            {
              size: 'lg',
              indicator: 'hidden',
              class: {
                icon: 'size-4.5'
              }
            },
            {
              size: 'xl',
              indicator: 'hidden',
              class: {
                icon: 'size-5'
              }
            },
            {
              size: 'xs',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'p-2.5'
              }
            },
            {
              size: 'sm',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'p-3'
              }
            },
            {
              size: 'md',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'p-3.5'
              }
            },
            {
              size: 'lg',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'p-4'
              }
            },
            {
              size: 'xl',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'p-4.5'
              }
            },
            {
              orientation: 'horizontal',
              variant: 'table',
              class: {
                item: 'first-of-type:rounded-s-lg last-of-type:rounded-e-lg',
                fieldset: 'gap-0 -space-x-px'
              }
            },
            {
              orientation: 'vertical',
              variant: 'table',
              class: {
                item: 'first-of-type:rounded-t-lg last-of-type:rounded-b-lg',
                fieldset: 'gap-0 -space-y-px'
              }
            },
            {
              color: 'primary',
              variant: 'list',
              indicator: [
                'start',
                'end'
              ],
              class: {
                base: 'outline-primary/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-primary'
              }
            },
            {
              color: 'neutral',
              variant: 'list',
              indicator: [
                'start',
                'end'
              ],
              class: {
                base: 'outline-inverted/25 focus-visible:outline-solid focus-visible:outline-3 focus-visible:ring-inverted'
              }
            },
            {
              color: 'primary',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
              }
            },
            {
              color: 'neutral',
              variant: [
                'card',
                'table'
              ],
              class: {
                item: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
              }
            },
            {
              color: 'primary',
              variant: 'list',
              indicator: 'hidden',
              class: {
                item: 'outline-primary/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-primary has-focus-visible:z-1'
              }
            },
            {
              color: 'neutral',
              variant: 'list',
              indicator: 'hidden',
              class: {
                item: 'outline-inverted/25 has-focus-visible:outline-3 has-focus-visible:[&:not(:has(:disabled,[aria-disabled=true]))]:border-inverted has-focus-visible:z-1'
              }
            },
            {
              color: 'primary',
              variant: 'card',
              class: {
                item: 'has-data-[state=checked]:border-primary/50 has-data-[state=checked]:bg-primary/10'
              }
            },
            {
              color: 'neutral',
              variant: 'card',
              class: {
                item: 'has-data-[state=checked]:border-border-inverted/50 has-data-[state=checked]:bg-background-elevated'
              }
            },
            {
              color: 'primary',
              variant: 'table',
              class: {
                item: 'has-data-[state=checked]:bg-primary/10 has-data-[state=checked]:border-primary/50 has-data-[state=checked]:z-2'
              }
            },
            {
              color: 'neutral',
              variant: 'table',
              class: {
                item: 'has-data-[state=checked]:bg-background-elevated has-data-[state=checked]:border-border-inverted/50 has-data-[state=checked]:z-2'
              }
            },
            {
              variant: [
                'card',
                'table'
              ],
              disabled: true,
              class: {
                item: 'cursor-not-allowed'
              }
            },
            {
              color: 'primary',
              indicator: 'hidden',
              highlight: true,
              class: {
                item: '[&:not(:has(:disabled))]:border-primary [&:not(:has(:disabled)):has([data-state=checked])]:border-primary'
              }
            },
            {
              color: 'neutral',
              indicator: 'hidden',
              highlight: true,
              class: {
                item: '[&:not(:has(:disabled))]:border-border-inverted [&:not(:has(:disabled)):has([data-state=checked])]:border-border-inverted'
              }
            },
            {
              color: 'primary',
              highlight: true,
              class: {
                base: 'ring-primary'
              }
            },
            {
              color: 'neutral',
              highlight: true,
              class: {
                base: 'ring-border-inverted'
              }
            }
          ],
          defaultVariants: {
            highlight: false,
            size: 'md',
            color: 'primary',
            variant: 'list',
            indicator: 'start'
          }
        }
      }
    })
  ]
})
Some colors in compoundVariants are omitted for readability. Check out the source code on GitHub.

Changelog

No recent changes

PinInput

An input element to enter a pin.

Select

A select element to choose from a list of options.