Devre dışı ve salt okunur

Devre dışı ve salt okunur farklı şeyler söyler. Devre dışı “şu an kullanılamaz” der; salt okunur “değeri görebilirsiniz ama değiştiremezsiniz” der. Bu kalıp ikisini ayırır.

Ne zaman kullanılır

• Bir eylem veya alan geçici olarak kullanılamıyorsa: devre dışı.
• Kullanıcı bir değeri görebilir, kopyalayabilir ama değiştiremezse: salt okunur.
• Kullanıcının hiçbir zaman kullanamayacağı bir denetimi göstermeyin; gizleyin.

Özellik	Devre dışı	Salt okunur
Odaklanabilir	Hayır	Evet
Formla gönderilir	Hayır	Evet
Kopyalanabilir	Hayır	Evet
Ekran okuyucu	“Soluk, kullanılamaz” olarak okur	“Salt okunur” olarak okur
Kontrast gereksinimi	Muaf	Normal
Ne zaman	Geçici olarak kullanılamayan eylem veya alan	Kullanıcının görebildiği ama değiştiremediği değer

Canlı örnek

Sekme tuşuyla gezin: salt okunur alan ve gerekçeli düğme odak alır, devre dışı alan almaz. Aynı veri altta görüntüleme sayfası biçiminde de verilir.

Canlı örnek, StorybookStorybook'ta aç

Salt okunur ve devre dışı alan

Salt okunur

Devre dışı

Devre dışı eylem ve ayar

Yayımla

Ekibe bildirim gönderEkip eklenmediği için kapalı. Önce Ekip sayfasından kişi ekleyin.

Görüntüleme sayfasında aynı veri

Proje kodu

PRJ-1024

Sahibi

Ekip A

Kayıt sayısı

12

AçıkKoyu

Kodu kopyala

import { Button, DescriptionList, Heading, Stack, Switch, TextInput, Tooltip } from '@bigbang/ui';
import { type Lang, LangProvider } from '../lang';

const copy = {
  tr: {
    readOnlyTitle: 'Salt okunur ve devre dışı alan',
    readOnly: 'Salt okunur',
    disabled: 'Devre dışı',
    value: 'PRJ-1024',
    actionTitle: 'Devre dışı eylem ve ayar',
    publish: 'Yayımla',
    publishReason: 'Yayımlamak için önce bir başlık ekleyin',
    notify: 'Ekibe bildirim gönder',
    notifyReason: 'Ekip eklenmediği için kapalı. Önce Ekip sayfasından kişi ekleyin.',
    viewTitle: 'Görüntüleme sayfasında aynı veri',
    items: [
      { term: 'Proje kodu', details: 'PRJ-1024' },
      { term: 'Sahibi', details: 'Ekip A' },
      { term: 'Kayıt sayısı', details: '12' },
    ],
  },
  en: {
    readOnlyTitle: 'Read-only and disabled field',
    readOnly: 'Read only',
    disabled: 'Disabled',
    value: 'PRJ-1024',
    actionTitle: 'Disabled action and setting',
    publish: 'Publish',
    publishReason: 'Add a title before you publish',
    notify: 'Notify the team',
    notifyReason: 'Off because no team is added. Add people on the Team page first.',
    viewTitle: 'The same data on a view page',
    items: [
      { term: 'Project code', details: 'PRJ-1024' },
      { term: 'Owner', details: 'Team A' },
      { term: 'Records', details: '12' },
    ],
  },
};

/**
 * Read-only keeps the value in the tab order, copyable and submitted; disabled removes it from all three.
 * A disabled action explains why: a focusable Button with a Tooltip, or a Switch with a description.
 */
export function StateComparison({ lang = 'tr' }: { lang?: Lang }) {
  const t = copy[lang];
  return (
    <LangProvider lang={lang}>
      <div className="w-full max-w-md">
        <Stack gap="2xl">
          <Stack gap="md">
            <Heading level={3} size="sm">
              {t.readOnlyTitle}
            </Heading>
            <TextInput label={t.readOnly} name="code-readonly" readOnly defaultValue={t.value} />
            <TextInput label={t.disabled} name="code-disabled" disabled defaultValue={t.value} />
          </Stack>
          <Stack gap="md">
            <Heading level={3} size="sm">
              {t.actionTitle}
            </Heading>
            <div>
              <Tooltip content={t.publishReason}>
                <Button disabled focusableWhenDisabled>
                  {t.publish}
                </Button>
              </Tooltip>
            </div>
            <Switch label={t.notify} description={t.notifyReason} disabled />
          </Stack>
          <Stack gap="md">
            <Heading level={3} size="sm">
              {t.viewTitle}
            </Heading>
            <DescriptionList items={t.items} dividers />
          </Stack>
        </Stack>
      </div>
    </LangProvider>
  );
}

Kurallar

Kural	Değer
Hiç kullanılamayacak denetim	Devre dışı bırakmayın, gizleyin.
Devre dışı eylem	Nedenini söyleyin: focusableWhenDisabled düğme ve nedenini veren Tooltip, ya da yanında metin.
Gönder düğmesi	Doğrulamayı belirtmek için devre dışı bırakılmaz. Bkz. Formlar ve doğrulama.
Görüntüleme sayfası	Salt okunur değerler salt okunur alan yerine DescriptionList ile gösterilir.
Devre dışı Switch	description ile nedeni yazılır.
Kontrast	Devre dışı öğe muaftır; salt okunur değer normal kontrastla okunur (4,5:1).

Yayımla

YapınDevre dışı düğme odak alır ve nedenini söyler.

Yayımla

YapmayınSessiz devre dışı düğme nedenini söylemez ve odak alamaz.

Davranış

1. Kullanıcı bir devre dışı denetime gelir. Düğme odak alıyorsa Tooltip nedenini gösterir.
2. Neden ortadan kalkınca (örneğin başlık eklenince) denetim etkinleşir; ek bir bildirim gerekmez.
3. Salt okunur alan odak alır, seçilir ve kopyalanır; yazma denemesi değeri değiştirmez.
4. Salt okunur alan formla gönderilir; devre dışı alan gönderilmez. Değerin gönderilmesi gerekiyorsa salt okunur kullanın.

Erişilebilirlik

• focusableWhenDisabled düğme aria-disabled="true" taşır ve sekme sırasında kalır; Tooltip nedeni aria-describedby ile bağlar.
• Salt okunur alan readonly taşır ve ekran okuyucuda “salt okunur” olarak duyurulur.
• Devre dışı alan disabled taşır; sekme sırasından çıkar. Neden yalnızca Tooltip’te kalmamalı; gerekiyorsa yanında metin yazın.
• Devre dışı öğeler WCAG 1.4.3 kontrast gereksiniminden muaftır; bu nedenle önemli bilgiyi onlarla vermeyin.
• Tooltip yalnızca hover’da değil, klavye odağında da açılır.

İçerik

• Neden kısa ve çözüm odaklıdır: “Yayımlamak için önce bir başlık ekleyin”.
• “Devre dışı” veya “kullanılamaz” gibi durumu tekrar eden metinler yazmayın; nedeni yazın.
• Switch açıklaması durumu ve çıkış yolunu söyler: “Ekip eklenmediği için kapalı. Önce Ekip sayfasından kişi ekleyin.”

Hareket

Öğe	Hareket	Preset
Alan çerçevesi ve dolgu	110 ms renk geçişi	motion.field
Tooltip	150 ms açılma, 110 ms kapanma	motion.tooltip
Düğme	Etkin durumda basınca 0,97 ölçek; devre dışıyken hareket yok	motion.press

Hareketi azaltma tercihinde kaymalar kalkar, yalnızca solma kalır.

Kullanılan bileşenler

TextInput, Button, Tooltip, Switch, DescriptionList. İlgili kalıp: Formlar ve doğrulama.