nili/ui
enfaartr
Tüm bileşenler

Switch

Genel görünüm
5 export2 varyant ekseni23 prop4 dosya
import { Switch } from '@nili/ui';

Bu, kütüphanenin kendi genel görünüm sayfası — canlı olarak render ediliyor. Üstten dili veya temayı değiştirin, o da değişir.

Durumlar

Anahtar hemen etki eder — değişiklik bir Kaydet düğmesi gerektiriyorsa istediğiniz şey Checkbox’tır. onCheckedChange yeni durumla tetiklenir; ham olay gerçekten gerekirse onInputChange olarak durur.

import { Switch } from "@nili/ui"

export function Example() {
  const [enabled, setEnabled] = useState(true)

  return (
    <>
      <Switch label={t('states.off')} />
      <Switch label={t('states.on')} defaultChecked />
      <Switch
        label="Controlled"
        checked={enabled}
        onCheckedChange={setEnabled}
      />
      <Switch label={t('states.disabled')} disabled />
      <Switch label={t('states.disabledOn')} disabled defaultChecked />
    </>
  )
}

Etiket satırı

Checkbox ve Radio ile aynı dört yuva — sublabel, badge, description, linkButton — böylece üçünden kurulmuş bir ayarlar listesi hizalanır.

(isteğe bağlı)
(önerilir)GüvenliHer oturum açışta kimlik doğrulayıcı uygulamanızdan bir kod isteriz.Yeni bir cihaz ekle
import { Switch, Badge, LinkButton } from "@nili/ui"

export function Example() {
  return (
    <Switch
      defaultChecked
      label="Two-factor authentication"
      sublabel="(recommended)"
      badge={<Badge size="small" color="green" appearance="lighter">Secure</Badge>}
      description="We will ask for a code from your authenticator app at every sign-in."
      linkButton={<LinkButton href="#" size="sm">Set up a new device</LinkButton>}
    />
  )
}

Etiket konumu

Bir ayarlar listesinde anahtar genelde satırın sonunda, metinden uzakta durur. Mantıksaldır, okuma yönünü izler.

labelPosition değeri start
labelPosition değeri end — varsayılan
import { Switch } from "@nili/ui"

export function Example() {
  return (
    <>
      <Switch label="Switch after the label" labelPosition="start" />
      <Switch label="Switch before the label" labelPosition="end" />
    </>
  )
}

Etiketsiz

Çıplak bir anahtara aria-label verin — adsız bir anahtar yalnızca “anahtar” diye duyurulur.

import { Switch } from "@nili/ui"

export function Example() {
  return <Switch aria-label="Dark mode" />
}

Bir ayarlar listesinde

Olağan biçim: açıklamalı bir anahtar satırı, önce etiket, sonda denetim.

Ürün güncellemeleri ve güvenlik uyarıları.
Yalnızca bu cihazda.
Her pazartesi sabahı bir özet.
import { Switch } from "@nili/ui"

export function Example() {
  return (
    <div className="divide-y divide-soft-200 rounded-xl border border-soft-200">
      <div className="p-4">
        <Switch
          labelPosition="start"
          label="Email notifications"
          description="Product updates and security alerts."
          defaultChecked
        />
      </div>
      …
    </div>
  )
}