Switch

Dokunabileceğiniz, basabileceğiniz veya sürükleyebileceğiniz, parmağınızın altında uzayan bir başparmağı ve kayıtlar için isteğe bağlı bekleme durumu olan bir açma/kapama anahtarı.

Wi-FiJoin known networks automatically.BluetoothConnect to headphones and keyboards.Nearby sharingLet people around you send files.

import { Switch } from "@/components/ui/switch"

const settings = [
  {
    id: "wifi",
    title: "Wi-Fi",
    description: "Join known networks automatically.",
    on: true,
  },
  {
    id: "bluetooth",
    title: "Bluetooth",
    description: "Connect to headphones and keyboards.",
    on: false,
  },
  {
    id: "airdrop",
    title: "Nearby sharing",
    description: "Let people around you send files.",
    on: true,
  },
]

export function SwitchDemo() {
  return (
    <div className="flex w-full max-w-sm flex-col divide-y rounded-xl border">
      {settings.map((setting) => (
        <label
          key={setting.id}
          className="flex items-center justify-between gap-4 p-4 text-sm"
        >
          <span className="flex flex-col gap-0.5">
            <span className="font-medium">{setting.title}</span>
            <span className="text-muted-foreground">{setting.description}</span>
          </span>
          <Switch defaultChecked={setting.on} />
        </label>
      ))}
    </div>
  )
}

Kurulum

pnpm dlx shadcn@latest add https://hextaui.com/r/switch.json

Bileşeni, HextaUI tema token'larını ve bileşenin bağımlı olduğu tüm HextaUI bileşenlerini ekler.

Henüz eklemediyseniz tema token'larını global CSS'inize ekleyin.

Bağımlılıkları yükleyin.

pnpm add @base-ui/react @tabler/icons-react class-variance-authority cn

Aşağıdaki kodu kopyalayıp projenize yapıştırın.

components/ui/switch.tsx

"use client"

import * as React from "react"
import { Switch as SwitchPrimitive } from "@base-ui/react/switch"
import { IconCheck } from "@tabler/icons-react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

components/ui/spinner.tsx

"use client"

import * as React from "react"
import { cva, type VariantProps } from "class-variance-authority"
import { cn } from "cn"

import {
  useDelayedLoading,

lib/motion.ts

import * as React from "react"

const easeOut = "cubic-bezier(0.23, 1, 0.32, 1)"
const easeInOut = "cubic-bezier(0.77, 0, 0.175, 1)"
const easeSpring =
  "linear(0, 0.015 2%, 0.0532 4%, 0.1065 6%, 0.1686 8%, 0.2351 10%, 0.3363 13%, 0.4332 16%, 0.5495 20%, 0.648 24%, 0.7287 28%, 0.807 33%, 0.8646 38%, 0.9128 44%, 0.9447 50%, 0.968 57%, 0.9834 65%, 0.9924 74%, 0.9975 85%, 1)"

const duration = {

İçe aktarma yollarını proje yapılandırmanıza uyacak şekilde güncelleyin.

Kullanım

import { Switch } from "@/components/ui/switch"

<label className="flex items-center gap-3">
  <Switch defaultChecked />
  Wi-Fi
</label>

Basın; başparmak karşı tarafa fırlamadan önce o yöne doğru uzar, böylece basışın oturduğunu hissedersiniz. Başparmağı tutup sürükleyebilirsiniz de: ortayı geçerse döner, geçmezse geri oturur.

Örnekler

iOS

variant="ios" daha yüksek bir iz, hap biçimli bir başparmak ve açıkken yeşil kullanır. Basma, sürükleme ve kaydetme aynı çalışır.

import { Switch } from "@/components/ui/switch"

export function SwitchIos() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch variant="ios" />
        Airplane mode
      </label>
      <label className="flex items-center gap-3">
        <Switch variant="ios" defaultChecked />
        Wi-Fi
      </label>
      <div className="flex items-center gap-4">
        <Switch variant="ios" size="sm" aria-label="Small" defaultChecked />
        <Switch variant="ios" size="lg" aria-label="Large" defaultChecked />
      </div>
    </div>
  )
}

onCheckedChange'den bir promise döndürün; kontrollü olsa bile anahtar hemen döner. Başparmakta bir spinner yalnızca kaydetme 400ms'den uzun sürerse gösterilir. Reddedilirse anahtar geri döner ve sallanır.

"use client"

import { Switch } from "@/components/ui/switch"

function save(succeed: boolean) {
  return new Promise<void>((resolve, reject) =>
    setTimeout(() => (succeed ? resolve() : reject(new Error("Offline"))), 1200)
  )
}

export function SwitchAsync() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch onCheckedChange={() => save(true)} />
        Sync to cloud (saves)
      </label>
      <label className="flex items-center gap-3">
        <Switch defaultChecked onCheckedChange={() => save(false)} />
        Public profile (fails and flips back)
      </label>
    </div>
  )
}

Açık ve kapalı işaretleri

icons, durum renge dayanmasın diye ize bir onay işareti ve bir halka ekler.

import { Switch } from "@/components/ui/switch"

export function SwitchIcons() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch icons defaultChecked />
        Captions
      </label>
      <label className="flex items-center gap-3">
        <Switch icons size="lg" />
        Reduce transparency
      </label>
    </div>
  )
}

Boyutlar

sm, default ve lg.

import { Switch } from "@/components/ui/switch"

export function SwitchSizes() {
  return (
    <div className="flex items-center gap-6">
      <Switch size="sm" aria-label="Small" defaultChecked />
      <Switch aria-label="Default" defaultChecked />
      <Switch size="lg" aria-label="Large" defaultChecked />
    </div>
  )
}

Bir alanda

Field ile etiket ve açıklama anahtara bağlanır.

import {
  Field,
  FieldContent,
  FieldDescription,
  FieldLabel,
} from "@/components/ui/field"
import { Switch } from "@/components/ui/switch"

export function SwitchField() {
  return (
    <Field orientation="horizontal" className="w-full max-w-sm">
      <FieldContent>
        <FieldLabel>Marketing emails</FieldLabel>
        <FieldDescription>
          Product news and offers, about once a month.
        </FieldDescription>
      </FieldContent>
      <Switch name="marketing" />
    </Field>
  )
}

Devre dışı ve salt okunur

readOnly değeri görünür ve odaklanabilir tutar ama değiştirmez.

import { Switch } from "@/components/ui/switch"

export function SwitchStates() {
  return (
    <div className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch disabled />
        Disabled
      </label>
      <label className="flex items-center gap-3">
        <Switch disabled defaultChecked />
        Disabled and on
      </label>
      <label className="flex items-center gap-3">
        <Switch readOnly defaultChecked />
        Read-only (managed by your admin)
      </label>
    </div>
  )
}

Kontrollü

checked ve onCheckedChange verin.

"use client"

import * as React from "react"

import { Switch } from "@/components/ui/switch"

export function SwitchControlled() {
  const [dark, setDark] = React.useState(false)

  return (
    <label className="flex items-center gap-3 text-sm">
      <Switch checked={dark} onCheckedChange={setDark} />
      Dark mode is {dark ? "on" : "off"}
    </label>
  )
}

Sağdan sola

Başparmak sağda başlar ve sola kayar, sürükleme de bunu izler.

import { Switch } from "@/components/ui/switch"

export function SwitchRtl() {
  return (
    <div dir="rtl" className="flex flex-col gap-4 text-sm">
      <label className="flex items-center gap-3">
        <Switch defaultChecked icons />
        الإشعارات
      </label>
      <label className="flex items-center gap-3">
        <Switch />
        الوضع الداكن
      </label>
    </div>
  )
}

Klavye

Tuş	Action
`SpaceEnter`	Odaktaki anahtarı açar veya kapatır.

Erişilebilirlik

Anahtar, etiketiyle adlandırılan bir switch rolüdür. Onu bir <label> ile sarın veya Field kullanın.
Kaydederken aria-busy olur ve yeni basışları yok sayar.
Tıklama alanı anahtardan büyüktür, dokunmatikte daha da büyüktür.
Azaltılmış harekette başparmak anında hareket eder ve hiçbir şey sallanmaz.

API referansı

Switch

Prop	Tür	Varsayılan
`checked`	`boolean`	`–`
`defaultChecked`	`boolean`	`false`
`onCheckedChange`Kaydetme durumunu göstermek için bir promise döndürün. Reddedilirse kontrolsüz bir anahtar geri döner.	`(checked, details) => void \| Promise`	`–`
`variant`	`"default" \| "ios"`	`"default"`
`size`	`"sm" \| "default" \| "lg"`	`"default"`
`icons`İzde açık ve kapalı işaretlerini gösterir.	`boolean`	`false`
`name`	`string`	`–`
`value`	`string`	`–`
`disabled`	`boolean`	`false`
`readOnly`	`boolean`	`false`
`required`	`boolean`	`false`
`render`	`ReactElement \| (props, state) => ReactElement`	`<span>`

Öznitelik	Açıklama
`data-slot="switch"`	İz; data-size ve data-variant ile.
`data-slot="switch-thumb"`	Başparmak.
`data-checked / data-unchecked`	Anahtarın açık olup olmadığı.
`data-dragging`	Başparmak sürüklenirken bulunur.
`data-pending`	Döndürülen bir promise beklemedeyken bulunur.
`--switch-w / --switch-h / --switch-thumb / --switch-thumb-w`	İz ve başparmak boyutları; size ile belirlenir.

Kullanıldığı bloklar

Switch üzerine kurulan bloklar.