Bileşenler

InputGroup

Metin denetimini önüne, arkasına, üstüne ya da altına gelen eklerle tek kutuda toplar.

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

InputGroup, InputGroup.Input ile ekleri tek kenarlıklı kutuya koyar. InputGroup.Text ön ve son ek metni içindir.

Alan etiketi

https://

.com

Yardım metni burada yer alır.

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

export default function Default() {
  return (
    <div className="max-w-96">
      <InputGroup label="Alan etiketi" description="Yardım metni burada yer alır.">
        <InputGroup.Addon>
          <InputGroup.Text>https://</InputGroup.Text>
        </InputGroup.Addon>
        <InputGroup.Input />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>.com</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

İkon ve işlem

Ön ekte süs ikonu, son ekte tek bir küçük işlem olabilir. Örnekte değer varken temizleme butonu görünür.

Alan etiketi

import { Icon, InputGroup } from '@bigbang/ui';
import { useState } from 'react';

export default function IconAndAction() {
  const [value, setValue] = useState('');
  return (
    <div className="max-w-96">
      <InputGroup label="Alan etiketi">
        <InputGroup.Addon>
          <Icon name="search" size="sm" />
        </InputGroup.Addon>
        <InputGroup.Input value={value} onValueChange={setValue} />
        {value ? (
          <InputGroup.Addon align="inline-end">
            <InputGroup.Button icon="x" label="Temizle" onClick={() => setValue('')} />
          </InputGroup.Addon>
        ) : null}
      </InputGroup>
    </div>
  );
}

Birim

Son ekteki birim metni, değerin neyle ölçüldüğünü söyler. size="lg" satırı 40 px yapar.

Alan etiketi

adet

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

export default function Unit() {
  return (
    <div className="max-w-60">
      <InputGroup label="Alan etiketi" size="lg">
        <InputGroup.Input inputMode="numeric" />
        <InputGroup.Addon align="inline-end">
          <InputGroup.Text>adet</InputGroup.Text>
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

Blok ek

align="block-end" eki denetimin altına, tam genişlikte bir satıra koyar; metin alanının araç çubuğu içindir.

Alan etiketi

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

export default function BlockAddon() {
  return (
    <div className="max-w-96">
      <InputGroup label="Alan etiketi">
        <InputGroup.Textarea rows={4} />
        <InputGroup.Addon align="block-end">
          <InputGroup.Button icon="copy" label="Kopyala" />
        </InputGroup.Addon>
      </InputGroup>
    </div>
  );
}

Durumlar

Zorunlu ve hatalı, devre dışı gruplar. Odak, hata ve devre dışı renkleri tüm kutuya uygulanır.

Alan etiketi

https://

Bu alan boş bırakılamaz.

Alan etiketi

https://

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

export default function States() {
  return (
    <>
      <div className="flex max-w-96 flex-col gap-lg">
        <InputGroup label="Alan etiketi" required error="Bu alan boş bırakılamaz.">
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input required />
        </InputGroup>
        <InputGroup label="Alan etiketi" disabled>
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input />
        </InputGroup>
      </div>
    </>
  );
}

Açık ve koyu mod

Renkler color-border-*, color-surface-* ve color-text-* token’larından gelir.

Alan etiketi

https://

Bu alan boş bırakılamaz.

Alan etiketi

https://

Alan etiketi

https://

Bu alan boş bırakılamaz.

Alan etiketi

https://

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

export default function States() {
  return (
    <>
      <div className="flex max-w-96 flex-col gap-lg">
        <InputGroup label="Alan etiketi" required error="Bu alan boş bırakılamaz.">
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input required />
        </InputGroup>
        <InputGroup label="Alan etiketi" disabled>
          <InputGroup.Addon>
            <InputGroup.Text>https://</InputGroup.Text>
          </InputGroup.Addon>
          <InputGroup.Input />
        </InputGroup>
      </div>
    </>
  );
}