Field

import { Field, FieldDescription, FieldLabel } from '@jamie/ui/field'
import { Input } from '@jamie/ui/input'
 
export function FieldDemo() {
  return (
    <Field>
      <FieldLabel>Meeting Title</FieldLabel>
      <Input placeholder="Q3 Revenue Review" />
      <FieldDescription>The title shown in meeting summaries and transcripts.</FieldDescription>
    </Field>
  )
}

import { Checkbox } from '@jamie/ui/checkbox'
import { Field, FieldContent, FieldDescription, FieldLabel } from '@jamie/ui/field'
 
export function FieldHorizontalDemo() {
  return (
    <div className="flex flex-col gap-4">
      <Field orientation="horizontal">
        <Checkbox defaultChecked />
        <FieldContent>
          <FieldLabel>Auto-record meetings</FieldLabel>
          <FieldDescription>Automatically start recording when a meeting begins.</FieldDescription>
        </FieldContent>
      </Field>
      <Field orientation="horizontal">
        <Checkbox />
        <FieldContent>
          <FieldLabel>Send recap emails</FieldLabel>
          <FieldDescription>
            Email meeting summaries to all participants after each call.
          </FieldDescription>
        </FieldContent>
      </Field>
    </div>
  )
}

import { Field, FieldError, FieldLabel } from '@jamie/ui/field'
import { Input } from '@jamie/ui/input'
 
export function FieldWithErrorDemo() {
  return (
    <Field data-invalid="true">
      <FieldLabel>Meeting Title</FieldLabel>
      <Input placeholder="Q3 Revenue Review" />
      <FieldError>Meeting title is required.</FieldError>
    </Field>
  )
}