Field

'use client';

import { Field, Input } from '@akhatmirzo/ui';

export default function FieldBasic() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-4">
      <Field label="Telefon" required description="Tasdiqlash kodi SMS orqali yuboriladi">
        <Input prefix="+998" placeholder="90 123 45 67" inputMode="tel" />
      </Field>
      <Field label="Email" error="Email manzil noto'g'ri">
        <Input type="email" defaultValue="sarvar@mail" />
      </Field>
    </div>
  );
}

'use client';

import { Button, Field, Input } from '@akhatmirzo/ui';
import { useState, type FormEvent } from 'react';

export default function FieldValidation() {
  const [name, setName] = useState('');
  const [submitted, setSubmitted] = useState(false);
  const error = submitted && name.trim().length < 3 ? 'Kamida 3 ta harf kiriting' : undefined;

  const submit = (event: FormEvent) => {
    event.preventDefault();
    setSubmitted(true);
  };

  return (
    <form onSubmit={submit} noValidate className="flex w-full max-w-sm flex-col gap-4">
      <Field label="To'liq ism" required error={error}>
        <Input
          value={name}
          onChange={(e) => setName(e.target.value)}
          placeholder="Sarvar Abduxoliqov"
          autoComplete="name"
        />
      </Field>
      <Button type="submit" variant="primary">
        Davom etish
      </Button>
    </form>
  );
}

'use client';

import { Field, Input, Textarea } from '@akhatmirzo/ui';

export default function FieldHorizontal() {
  return (
    <div className="flex w-full max-w-xl flex-col gap-4">
      <Field orientation="horizontal" label="Do'kon nomi" description="Chekda ko'rinadi">
        <Input defaultValue="Bahor Market" />
      </Field>
      <Field orientation="horizontal" label="Manzil">
        <Textarea minRows={2} defaultValue="Toshkent, Chilonzor tumani, 9-kvartal" />
      </Field>
    </div>
  );
}

'use client';

import { Field, Input } from '@akhatmirzo/ui';

export default function FieldDisabled() {
  return (
    <div className="w-full max-w-sm">
      <Field label="Hudud" description="Hudud administrator tomonidan belgilanadi" disabled>
        <Input defaultValue="Toshkent shahri" />
      </Field>
    </div>
  );
}

'use client';

import { Field, useFieldControl } from '@akhatmirzo/ui';

function CitySelect() {
  const { controlProps, invalid, disabled } = useFieldControl();
  return (
    <select
      {...controlProps}
      disabled={disabled}
      data-invalid={invalid ? '' : undefined}
      className="h-10 rounded-lg border border-border bg-surface px-3 text-sm text-text data-invalid:border-danger"
    >
      <option value="">Tanlang</option>
      <option>Toshkent</option>
      <option>Samarqand</option>
      <option>Buxoro</option>
    </select>
  );
}

export default function FieldCustomControl() {
  return (
    <div className="w-full max-w-sm">
      <Field label="Shahar" required error="Shaharni tanlang">
        <CitySelect />
      </Field>
    </div>
  );
}