Bileşenler

Form

Gönderirken alanları denetleyen, sorunları bağlantılı bir özetle gösteren ve odağı özete taşıyan form.

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

Boş göndermeyi deneyin: gönderim durur, özet belirir ve odak özete gider. Bağlantılar alanlara götürür.

import { Button, Form, TextInput } from '@bigbang/ui';

export default function Default() {
  return (
    <Form className="max-w-md">
      <TextInput label="Ad soyad" name="name" required autoComplete="name" />
      <TextInput label="E-posta" name="email" type="email" required autoComplete="email" />
      <Button type="submit" className="self-start">
        Gönder
      </Button>
    </Form>
  );
}

Özetsiz

summary={false} ile odak doğrudan ilk geçersiz alana gider; kısa formlar için.

import { Button, Form, TextInput } from '@bigbang/ui';

export default function WithoutSummary() {
  return (
    <Form className="max-w-md" summary={false}>
      <TextInput label="Ad soyad" name="name" required autoComplete="name" />
      <TextInput label="E-posta" name="email" type="email" required autoComplete="email" />
      <Button type="submit" className="self-start">
        Gönder
      </Button>
    </Form>
  );
}

Sunucu hataları

Gönderimden sonra gelen errors özete eklenir ve odak yeniden özete gider.

import { Button, Form, TextInput } from '@bigbang/ui';
import { useState } from 'react';

export default function ServerErrors() {
  const [errors, setErrors] = useState<Record<string, string>>({});
  return (
    <Form className="max-w-md" errors={errors} onSubmit={() => setErrors({ team: 'Bu ekip adı kullanılıyor.' })}>
      <TextInput
        label="Ekip adı"
        name="team"
        defaultValue="Kuzey"
        {...(errors['team'] ? { error: errors['team'] } : {})}
        onValueChange={() => setErrors({})}
      />
      <Button type="submit" className="self-start">
        Gönder
      </Button>
    </Form>
  );
}

Açık ve koyu mod

Özet tehlike durumunun arka planını ve kenarlığını kullanır.

import { Button, Form, TextInput } from '@bigbang/ui';

export default function Default() {
  return (
    <Form className="max-w-md">
      <TextInput label="Ad soyad" name="name" required autoComplete="name" />
      <TextInput label="E-posta" name="email" type="email" required autoComplete="email" />
      <Button type="submit" className="self-start">
        Gönder
      </Button>
    </Form>
  );
}