Toggle. Ermine UI

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 toggle

pnpm dlx ermineui add toggle

yarn dlx ermineui add toggle

bunx ermineui add toggle

That copies 2 files into src/components/ui/toggle/. Files you already have are kept.

Use

import { Toggle } from '@/components/ui/toggle'

<InputGroup>
  <template #prefix>$</template>
  <Input v-model="amount" />
  <template #suffix>USD</template>
</InputGroup>
<PasswordInput v-model="password" autocomplete="new-password" />
<SearchInput v-model="query" placeholder="Search" />

<TagsInput v-model="emails" name="to" :validate="(tag) => isEmail(tag) ? undefined : 'Not an email address.'" />

<Toggle v-model="bold" aria-label="Bold"><strong>B</strong></Toggle>

<TimePicker v-model="time" :step="15" min="07:00" max="19:00" />    <!-- 'HH:MM', 24-hour -->
<DateTimePicker v-model="startsAt" />                               <!-- 'YYYY-MM-DDTHH:MM' -->
<ColorPicker v-model="colour" :presets="['#2a78d6', '#eb6834']" />  <!-- '#rrggbb' -->

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

File	Where it goes
`Toggle.vue`	`src/components/ui/toggle/Toggle.vue`
`index.ts`	`src/components/ui/toggle/index.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.

Toggle.vue 84 lines

<script setup lang="ts">
withDefaults(
  defineProps<{
    variant?: 'default' | 'outline'
    size?: 'sm' | 'md'
  }>(),
  { variant: 'default', size: 'md' },
)

const pressed = defineModel<boolean>({ default: false })
</script>

<template>
  <button type="button" class="er-toggle" :aria-pressed="pressed" :data-state="pressed ? 'on' : 'off'" :data-variant="variant" :data-size="size" @click="pressed = !pressed">
    <slot :pressed="pressed" />
  </button>
</template>

<style>
@layer components {
  .er-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.375rem;
    min-width: var(--er-control-md);
    height: var(--er-control-md);
    padding: 0 0.625rem;
    border: 1px solid transparent;
    border-radius: var(--er-radius-control);
    background: transparent;
    color: var(--er-muted-foreground);
    font-family: inherit;
    font-size: 0.875rem;
    font-weight: var(--er-weight-medium);
    white-space: nowrap;
    cursor: pointer;
    transition:
      background-color var(--er-duration),
      color var(--er-duration),
      border-color var(--er-duration);
  }

  .er-toggle[data-size='sm'] {
    min-width: var(--er-control-sm);
    height: var(--er-control-sm);
    padding: 0 0.5rem;
    font-size: 0.8125rem;
  }

  .er-toggle[data-variant='outline'] {
    border-color: var(--er-input);
    background: var(--er-input-background);
    box-shadow: var(--er-shadow-xs);
  }

  .er-toggle:hover {
    background: color-mix(in oklab, var(--er-accent) 60%, transparent);
    color: var(--er-foreground);
  }

  .er-toggle[data-state='on'] {
    background: var(--er-accent);
    color: var(--er-accent-foreground);
  }

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

  .er-toggle:disabled {
    opacity: 0.5;
    pointer-events: none;
  }

  .er-toggle svg {
    flex-shrink: 0;
    width: 1rem;
    height: 1rem;
  }
}
</style>

index.ts 3 lines

/** Toggle — a single button that stays pressed, such as bold or mute. */
export { default as Toggle } from './Toggle.vue'