Ermine UI

Radio group

Pick one of a few options. Native radio buttons, restyled, with form support.

See it liveSource on GitHub

Install

If this is the first component in the project, set up once. This writes ermine.json and copies the theme stylesheet. The installation guide covers Vue, Nuxt and Astro.

npx ermineui init
pnpm dlx ermineui init
yarn dlx ermineui init
bunx ermineui init

Then add the component:

npx ermineui add radio-group
pnpm dlx ermineui add radio-group
yarn dlx ermineui add radio-group
bunx ermineui add radio-group

That copies 4 files into src/components/ui/radio-group/, 1 helper into src/lib/ermine/. Files you already have are kept.

Use

import { RadioGroup, RadioGroupItem } from '@/components/ui/radio-group'
<RadioGroup v-model="plan" name="plan" aria-label="Plan">
  <Label><RadioGroupItem value="hobby" /> Hobby</Label>
  <Label><RadioGroupItem value="pro" /> Pro</Label>
</RadioGroup>

In Nuxt, with the auto-import setting, the tags work in templates without the import. In Astro, use it inside a Vue island.

What gets copied

FileWhere it goes
RadioGroup.vuesrc/components/ui/radio-group/RadioGroup.vue
RadioGroupItem.vuesrc/components/ui/radio-group/RadioGroupItem.vue
context.tssrc/components/ui/radio-group/context.ts
index.tssrc/components/ui/radio-group/index.ts
context.ts helpersrc/lib/ermine/context.ts

The folders are the suggested ones. ermine.json says where yours are.

Source

This is exactly what the command copies. To install by hand, create each file below and the helpers listed above.

RadioGroup.vue 97 lines
<script setup lang="ts">
import { computed, toRef, useId } from 'vue'
import { provideRadioGroup } from './context'

const props = withDefaults(
  defineProps<{
    /** Submit the value with a form under this name. One is made up when you leave it out. */
    name?: string
    disabled?: boolean
    orientation?: 'horizontal' | 'vertical'
  }>(),
  { orientation: 'vertical' },
)

const value = defineModel<string>()
const fallbackName = useId()

provideRadioGroup({
  value,
  select: (next) => {
    value.value = next
  },
  name: computed(() => props.name ?? fallbackName),
  disabled: toRef(props, 'disabled'),
})
</script>

<template>
  <div role="radiogroup" class="er-radio-group" :aria-orientation="orientation" :data-orientation="orientation">
    <slot />
  </div>
</template>

<style>
@layer components {
  .er-radio-group {
    display: grid;
    gap: 0.75rem;
  }

  .er-radio-group[data-orientation='horizontal'] {
    display: flex;
    flex-wrap: wrap;
    gap: 0.75rem 1.25rem;
  }

  /* A real radio button, restyled — so forms, labels and the arrow keys all work as usual. */
  .er-radio {
    appearance: none;
    display: inline-grid;
    place-content: center;
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
    margin: 0;
    border: 1px solid var(--er-input);
    border-radius: 50%;
    background: var(--er-input-background);
    box-shadow: var(--er-shadow-xs);
    cursor: pointer;
    transition: border-color var(--er-duration);
  }

  .er-radio::before {
    content: '';
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--er-primary);
    transform: scale(0);
    transition: transform var(--er-duration) var(--er-ease);
  }

  .er-radio:checked {
    border-color: var(--er-primary);
  }

  .er-radio:checked::before {
    transform: scale(1);
  }

  .er-radio:focus-visible {
    outline: 2px solid var(--er-ring);
    outline-offset: 2px;
  }

  .er-radio:disabled {
    opacity: 0.5;
    cursor: not-allowed;
  }

  .er-radio[aria-invalid='true'] {
    border-color: var(--er-destructive);
  }
}
</style>
RadioGroupItem.vue 23 lines
<script setup lang="ts">
import { useRadioGroup } from './context'

defineProps<{
  value: string
  disabled?: boolean
}>()

const group = useRadioGroup()
</script>

<template>
  <input
    type="radio"
    class="er-radio"
    :name="group.name.value"
    :value="value"
    :checked="group.value.value === value"
    :disabled="disabled || group.disabled.value"
    @change="group.select(value)"
  />
</template>
context.ts 13 lines
import type { Ref } from 'vue'
import { createContext } from '../../lib/context'

export interface RadioGroupContext {
  value: Ref<string | undefined>
  select: (value: string) => void
  /** Shared by every radio in the group: it is what makes the arrow keys move between them. */
  name: Ref<string>
  disabled: Ref<boolean>
}

export const [provideRadioGroup, useRadioGroup] = createContext<RadioGroupContext>('RadioGroup')
index.ts 4 lines
/** Radio group — pick one of a few options. Native radio buttons, restyled, with form support. */
export { default as RadioGroup } from './RadioGroup.vue'
export { default as RadioGroupItem } from './RadioGroupItem.vue'