Switch Component

City of Philadelphia switch input component with TypeScript support.

Installation

pnpm add @phila/phila-ui-switch

Usage

<template>
  <Switch v-model="isEnabled">Enable notifications</Switch>
</template>

<script setup>
import { ref } from "vue";
import { Switch } from "@phila/phila-ui-switch";

const isEnabled = ref(false);
</script>

Props

| Prop | Type | Default | Description | | ------------ | ----------------------------- | ---------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------ | | id | string | generateRandomId("switch-input") | Unique identifier (uses generateRandomId from core) | | modelValue | string \| number \| boolean | false | Current value (v-model) | | value | string \| number \| boolean | true | Value when checked | | offValue | string \| number \| boolean | false | Value when unchecked | | disabled | boolean | false | Disable the switch | | name | string | "switch-input" | Input name attribute | | autofocus | boolean | false | Auto-focus on mount | | ariaLabel | string | "Switch input" | Screen reader label | | className | string | undefined | Additional CSS classes |

Events

| Event | Payload | Description | | ------------------- | ---------------------------------------------------- | -------------- | | update:modelValue | (value: string \| number \| boolean) | v-model update | | change | (value: string \| number \| boolean, event: Event) | State change | | focus | (event: FocusEvent) | Focus event | | blur | (event: FocusEvent) | Blur event |

Examples

Custom Values

<Switch v-model="status" :value="'active'" :off-value="'inactive'">
  Status: {{ status }}
</Switch>

Disabled

<Switch v-model="isEnabled" disabled>Disabled switch</Switch>

Development

Install Dependencies

pnpm install

Run Demo

pnpm dev

Build Library

pnpm build

Type Check

pnpm type-check

License

MIT