Bileşenler

Label

Field dışındaki bir denetimi adlandıran, zorunluluk işaretini taşıyan etiket.

Storybook: Storybook
Kaynak kod: Kaynak kod

Aşağıdaki örnek Storybook’tan canlı yüklenir; denetimleri Storybook’ta açabilirsiniz.

Canlı örnek, StorybookStorybook'ta aç

Varsayılan

Label yerel bir <label> çizer. htmlFor, denetimin id değeriyle eşleşir; etikete tıklamak odağı denetime taşır.

Alan etiketi

import { Label } from '@bigbang/ui';

export default function Default() {
  return (
    <div className="flex max-w-80 flex-col gap-xs">
      <Label htmlFor="label-default">Alan etiketi</Label>
      <input id="label-default" className="h-(--bigbang-input-height-md) w-full rounded-(--bigbang-input-radius) border border-line-input bg-surface-raised px-(--bigbang-input-padding-inline) type-body-md" />
    </div>
  );
}

Zorunlu ve isteğe bağlı

required etikete * ve görünmeyen “zorunlu” ekler. necessityIndicator="optional" zorunlu olmayan alanlara “(isteğe bağlı)” yazar. İşaret Field ile aynıdır.

Alan etiketi Alan etiketi(isteğe bağlı)

import { Label } from '@bigbang/ui';

export default function Necessity() {
  return (
    <>
      <div className="flex flex-col items-start gap-md">
        <Label required>Alan etiketi</Label>
        <Label necessityIndicator="optional">Alan etiketi</Label>
      </div>
    </>
  );
}

Boyutlar

size 14 px (label-md) ya da 12 px (label-sm) verir.

Alan etiketiAlan etiketi

import { Label } from '@bigbang/ui';

export default function Sizes() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Label size="md">Alan etiketi</Label>
      <Label size="sm">Alan etiketi</Label>
    </div>
  );
}

Denetimi saran etiket

Denetim etiketin içindeyse htmlFor gerekmez. disabled etiketi soluk gösterir; denetimi de devre dışı bırakın.

Seçenek etiketiSeçenek etiketi

import { Label } from '@bigbang/ui';

export default function Wrapping() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Label className="gap-sm">
        <input type="checkbox" />
        Seçenek etiketi
      </Label>
      <Label className="gap-sm" disabled>
        <input type="checkbox" disabled />
        Seçenek etiketi
      </Label>
    </div>
  );
}

Açık ve koyu mod

Renk color-text-default, devre dışıyken color-text-disabled token’ından gelir.

Seçenek etiketiSeçenek etiketi

import { Label } from '@bigbang/ui';

export default function Wrapping() {
  return (
    <div className="flex flex-col items-start gap-md">
      <Label className="gap-sm">
        <input type="checkbox" />
        Seçenek etiketi
      </Label>
      <Label className="gap-sm" disabled>
        <input type="checkbox" disabled />
        Seçenek etiketi
      </Label>
    </div>
  );
}