Field

'use client';

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/registry/san-francisco/ui/field';
import { Input } from '@/registry/san-francisco/ui/input';

export default function FieldDemo() {
  return (
    <Field className="max-w-xs">
      <FieldLabel>Email</FieldLabel>
      <Input placeholder="you@example.com" />
      <FieldDescription>We&apos;ll never share your email.</FieldDescription>
    </Field>
  );
}

'use client';

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/registry/san-francisco/ui/field';
import { Input } from '@/registry/san-francisco/ui/input';

export default function FieldDemoOrientation() {
  return (
    <FieldGroup className="max-w-xs">
      <Field orientation="vertical">
        <FieldLabel>Vertical</FieldLabel>
        <Input placeholder="Vertical field" />
      </Field>
      <Field orientation="horizontal">
        <FieldLabel>Horizontal</FieldLabel>
        <Input placeholder="Horizontal field" />
      </Field>
    </FieldGroup>
  );
}

'use client';

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/registry/san-francisco/ui/field';
import { Input } from '@/registry/san-francisco/ui/input';

export default function FieldDemoValidation() {
  return (
    <Field className="max-w-xs">
      <FieldLabel>Username</FieldLabel>
      <Input aria-invalid />
      <FieldError errors={[{ message: 'Username is required' }]} />
    </Field>
  );
}

'use client';

import {
  Field,
  FieldDescription,
  FieldError,
  FieldGroup,
  FieldLabel,
  FieldLegend,
  FieldSet,
} from '@/registry/san-francisco/ui/field';
import { Input } from '@/registry/san-francisco/ui/input';

export default function FieldDemoGroups() {
  return (
    <FieldSet className="w-full max-w-xs">
      <FieldLegend>Account Details</FieldLegend>
      <FieldGroup>
        <Field>
          <FieldLabel>First Name</FieldLabel>
          <Input />
        </Field>
        <Field>
          <FieldLabel>Last Name</FieldLabel>
          <Input />
        </Field>
      </FieldGroup>
    </FieldSet>
  );
}