Admin 元件

Switch

布林狀態開關。

安裝

Terminal

pnpm dlx shadcn-vue add @admin/switch

import { AdminSwitch } from '@/components/admin/switch'

用法

<script setup lang="ts">import { ref } from 'vue'import { AdminSwitch } from '@/components/admin/switch'const on = ref(false)</script><template>  <admin-switch v-model="on" /></template>

場景

帶文字標籤

<script setup lang="ts">import { ref } from 'vue'import { AdminSwitch } from '@/components/admin/switch'const on = ref(true)</script><template>  <admin-switch v-model="on" checked-text="ON" unchecked-text="OFF" /></template>

停用狀態

<script setup lang="ts">import { AdminSwitch } from '@/components/admin/switch'</script><template>  <div class="flex items-center gap-6">    <admin-switch disabled :model-value="false" />    <admin-switch disabled :model-value="true" />  </div></template>

API 參考

組成

<template>  <admin-switch v-model="value" /></template>

admin-switch

Props

名稱	型別	預設值	說明
`defaultValue`	`boolean \| undefined`	—	The state of the switch when it is initially rendered. Use when you do not need to control its state.
`modelValue`	`boolean \| null \| undefined`	—	The controlled state of the switch. Can be bind as `v-model`.
`disabled`	`boolean \| undefined`	—	When `true`, prevents the user from interacting with the switch.
`id`	`string \| undefined`	—	—
`value`	`string \| undefined`	—	The value given as data when submitted with a `name`.
`trueValue`	`boolean \| undefined`	—	The value used when the switch is on. Defaults to `true`.
`falseValue`	`boolean \| undefined`	—	The value used when the switch is off. Defaults to `false`.
`asChild`	`boolean \| undefined`	—	Change the default rendered element for the one passed as a child, merging their props and behavior. Read our [Composition](https://www.reka-ui.com/docs/guides/composition) guide for more details.
`as`	`globalThis.Component \| AsTag \| undefined`	`"div"`	The element or component this component should render as. Can be overwritten by `asChild`.
`name`	`string \| undefined`	—	The name of the field. Submitted with its owning form as part of a name/value pair.
`required`	`boolean \| undefined`	—	When `true`, indicates that the user must set the value before the owning form can be submitted.
`class`	`ClassValue`	—	根元素之自訂 class
`checkedText`	`string \| undefined`	—	開啟狀態顯示的文字（亦可用 `#checkedText` slot）
`uncheckedText`	`string \| undefined`	—	關閉狀態顯示的文字（亦可用 `#uncheckedText` slot）
`isError`	`boolean \| undefined`	—	設為 `true` 時套用錯誤狀態樣式（顯示 `data-is-error` 屬性供樣式 hook）

Events

名稱	Payload	說明
`update:modelValue`	`boolean`	—

Slots

名稱	Bindings	說明
`checkedText`	`any`	自訂開啟狀態文字內容（取代 `checkedText` prop）
`uncheckedText`	`any`	自訂關閉狀態文字內容（取代 `uncheckedText` prop）
`thumb`	`{ modelValue: boolean; }`	自訂 thumb 內容，bindings 含當前 `modelValue`

更新紀錄

2026-07-08fix: data-is-error 於 isError=false 時不再渲染屬性29644ac

Stepper

多步驟進度指示器。目前步驟與整體流程狀態。

Tabs

分頁切換。