72Başlayın
HextaUI

Toggle

Açık ya da kapalı kalan; basıldığında yerleşen bir dolgusu, belirgin bir hover-açık geçişi ve duruma göre dolabilen simgeleri olan bir düğme.

import { IconBold, IconItalic, IconUnderline } from "@tabler/icons-react"

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

export function ToggleDemo() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Bold" defaultPressed>
        <IconBold />
      </Toggle>
      <Toggle aria-label="Italic">
        <IconItalic />
      </Toggle>
      <Toggle aria-label="Underline">
        <IconUnderline />
      </Toggle>
    </div>
  )
}

Kurulum

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

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

Kullanım

import { Toggle } from "@/components/ui/toggle"
<Toggle aria-label="Bold">
  <IconBold />
</Toggle>

Kapalı bir toggle'ın üzerine gelmek hafif bir ton gösterir; açmak daha güçlü bir dolguyu yerine oturtur ve etiketi tam kontrasta getirir, böylece açık durum hover gibi görünmez.

Örnekler

Outline

variant="outline" tek başına duran toggle'lar için bir kenarlık ve yüzey ekler.

import { IconBookmark } from "@tabler/icons-react"

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

export function ToggleOutline() {
  return (
    <div className="flex items-center gap-2">
      <Toggle variant="outline" aria-label="Bookmark">
        <IconBookmark />
      </Toggle>
      <Toggle variant="outline">
        <IconBookmark />
        Bookmark
      </Toggle>
    </div>
  )
}

Metinli

Simgeler ve etiketler yan yana durur. Görünür metni olan toggle'lara aria-label gerekmez.

import { IconItalic, IconTextWrap } from "@tabler/icons-react"

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

export function ToggleText() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle>
        <IconItalic />
        Italic
      </Toggle>
      <Toggle variant="outline" defaultPressed>
        <IconTextWrap />
        Wrap lines
      </Toggle>
      <Toggle variant="outline">Show hidden files</Toggle>
    </div>
  )
}

Açıkken dolu

Bir outline simgeye group-data-pressed/toggle:fill-current ekleyin; toggle açıldıkça dolar.

import { IconBookmark, IconHeart, IconStar } from "@tabler/icons-react"

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

export function ToggleFilledIcon() {
  return (
    <div className="flex items-center gap-1">
      <Toggle aria-label="Like" defaultPressed>
        <IconHeart className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Star">
        <IconStar className="group-data-pressed/toggle:fill-current" />
      </Toggle>
      <Toggle aria-label="Save">
        <IconBookmark className="group-data-pressed/toggle:fill-current" />
      </Toggle>
    </div>
  )
}

Boyutlar

sm, default ve lg. Yalnızca simgeli toggle'lar kare kalır.

import { IconBold } from "@tabler/icons-react"

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

export function ToggleSizes() {
  return (
    <div className="flex flex-col gap-4">
      <div className="flex items-center gap-2">
        <Toggle size="sm" aria-label="Bold, small">
          <IconBold />
        </Toggle>
        <Toggle aria-label="Bold">
          <IconBold />
        </Toggle>
        <Toggle size="lg" aria-label="Bold, large">
          <IconBold />
        </Toggle>
      </div>
      <div className="flex items-center gap-2">
        <Toggle size="sm" variant="outline">
          Small
        </Toggle>
        <Toggle variant="outline">Default</Toggle>
        <Toggle size="lg" variant="outline">
          Large
        </Toggle>
      </div>
    </div>
  )
}

Hap (Pill)

shape="pill" uçları tamamen yuvarlar; sohbet yazma alanı gibi yuvarlak yüzeylerin içindeki toggle'lar için.

import { IconSparkles, IconWorld } from "@tabler/icons-react"

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

export function TogglePill() {
  return (
    <div className="flex flex-wrap items-center gap-2">
      <Toggle shape="pill" defaultPressed>
        <IconSparkles />
        Think
      </Toggle>
      <Toggle shape="pill" variant="outline">
        <IconWorld />
        Search
      </Toggle>
    </div>
  )
}

Devre dışı

Devre dışı bir toggle açık olup olmadığını göstermeye devam eder ama basılamaz veya odaklanılamaz.

import { IconBold, IconUnderline } from "@tabler/icons-react"

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

export function ToggleDisabled() {
  return (
    <div className="flex items-center gap-2">
      <Toggle disabled aria-label="Bold">
        <IconBold />
      </Toggle>
      <Toggle disabled defaultPressed aria-label="Underline">
        <IconUnderline />
      </Toggle>
      <Toggle disabled variant="outline">
        Read-only mode
      </Toggle>
    </div>
  )
}

Kontrollü

pressed ve onPressedChange verin. Simge durumu izlerken etiket aynı kalır.

"use client"

import * as React from "react"
import { IconMicrophone, IconMicrophoneOff } from "@tabler/icons-react"

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

export function ToggleControlled() {
  const [muted, setMuted] = React.useState(false)

  return (
    <div className="flex items-center gap-3 text-sm">
      <Toggle
        variant="outline"
        aria-label="Mute microphone"
        pressed={muted}
        onPressedChange={setMuted}
      >
        {muted ? <IconMicrophoneOff /> : <IconMicrophone />}
      </Toggle>
      <span className="text-muted-foreground">
        Microphone is {muted ? "muted" : "on"}
      </span>
    </div>
  )
}

Sağdan sola

Simgeler etiketin sağ tarafından öne geçer.

import { IconAlignRight, IconBold, IconItalic } from "@tabler/icons-react"

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

export function ToggleRtl() {
  return (
    <div dir="rtl" className="flex items-center gap-2">
      <Toggle variant="outline" defaultPressed>
        <IconBold />
        عريض
      </Toggle>
      <Toggle variant="outline">
        <IconItalic />
        مائل
      </Toggle>
      <Toggle variant="outline" aria-label="محاذاة لليمين">
        <IconAlignRight />
      </Toggle>
    </div>
  )
}

Klavye

TuşAction
SpaceEnterOdaktaki toggle'ı açar veya kapatır.
TabOdağı sonraki toggle'a taşır.

Erişilebilirlik

  • Toggle, aria-pressed içeren bir button'dır; böylece ekran okuyucular açık olup olmadığını duyurur.
  • Yalnızca simgeli toggle'lara eylemi adlandıran bir aria-label verin ("Mute microphone") ve her iki durumda aynı tutun. Basılı durumla birlikte onu da değiştirmek çift olumsuzlama gibi okunur.
  • Dokunmatik ekranlarda tıklama alanı en az 44px'e büyür; komşuların çakışacağı bir toggle group içinde hariç.
  • Azaltılmış harekette hiçbir şey ölçeklenmez; dolgu yalnızca solar.

API referansı

Toggle

PropTürVarsayılan
variant
"default" | "outline""default"
size
"default" | "sm" | "lg""default"
shape
"default" | "pill""default"
pressed
boolean–
defaultPressed
booleanfalse
onPressedChange
(pressed, details) => void–
disabled
booleanfalse
valueToggle'ı bir toggle group içinde tanımlar.
string–
className
string | (state) => string–
nativeButton
booleantrue
render
ReactElement | (props, state) => ReactElement<button>
ÖznitelikAçıklama
data-slot="toggle"Düğme; data-variant ve data-size ile.
data-pressedToggle açıkken bulunur.
data-disabledToggle devre dışıyken bulunur.

İlgili

Kullanıldığı bloklar

Toggle üzerine kurulan bloklar.