Field

import { Button, Field, Input, Textarea } from 'ferry-ui'

export default function FieldHero() {
  return (
    <form className="mx-auto flex w-full max-w-sm flex-col gap-5" onSubmit={(event) => event.preventDefault()}>
      <Field label="Project name">
        <Input placeholder="Billing portal" />
      </Field>
      <Field label="Billing email" hint="The app sends the invoices to this address.">
        <Input type="email" placeholder="maya@example.com" />
      </Field>
      <Field label="Description" optional>
        <Textarea placeholder="What is this project about?" />
      </Field>
      <Button type="submit" variant="primary" size="md" className="self-end">
        Create project
      </Button>
    </form>
  )
}

import * as React from 'react'
import { Field, Input } from 'ferry-ui'

const EMAIL = /^[^\s@]+@[^\s@]+\.[^\s@]+$/

export default function FieldError() {
  const [email, setEmail] = React.useState('maya@example')
  const error = email !== '' && !EMAIL.test(email) ? 'Enter a valid email address.' : undefined

  return (
    <Field label="Work email" hint="The app sends the sign-in link here." error={error} className="mx-auto w-full max-w-sm">
      <Input type="email" value={email} onChange={(event) => setEmail(event.target.value)} />
    </Field>
  )
}

import * as React from 'react'
import { Field, Input } from 'ferry-ui'

export default function FieldErrorAndHint() {
  const [seats, setSeats] = React.useState('80')
  const count = Number(seats)
  const valid = Number.isInteger(count) && count >= 1 && count <= 50

  return (
    <Field
      label="Seats"
      hint="Between 1 and 50. Each seat is on the invoice."
      error={valid ? undefined : 'Enter a whole number between 1 and 50.'}
      errorReplacesHint={false}
      className="mx-auto w-full max-w-sm"
    >
      <Input type="number" value={seats} onChange={(event) => setSeats(event.target.value)} className="w-24 tabular" />
    </Field>
  )
}

import { Field, Input } from 'ferry-ui'

export default function FieldOptional() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-5">
      <Field label="Company" optional hint="The name shows on your invoices.">
        <Input placeholder="Acme" />
      </Field>
      <Field label="Tax number" optional="(if you have one)">
        <Input mono />
      </Field>
    </div>
  )
}

import { Field, Input } from 'ferry-ui'

export default function FieldSizes() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-6">
      <Field size="md" label="Medium" hint="For a form in a page.">
        <Input placeholder="Billing portal" />
      </Field>
      <Field size="sm" label="Small" hint="For a form in a dialog or a popover.">
        <Input placeholder="Billing portal" />
      </Field>
    </div>
  )
}

import { CopyField, Field, Input } from 'ferry-ui'

export default function FieldLabelVariants() {
  return (
    <div className="mx-auto flex w-full max-w-sm flex-col gap-6">
      <Field label="Project name" hint="The default label.">
        <Input placeholder="Billing portal" />
      </Field>
      <Field labelVariant="subtle" label="Email" hint="The subtle label.">
        <Input type="email" placeholder="maya@example.com" />
      </Field>
      <Field labelVariant="mono" size="sm" label="API base URL" hint="The mono label, above a value to copy.">
        <CopyField size="sm" value="https://api.example.com/v1" what="API base URL" />
      </Field>
    </div>
  )
}

import { Field, Select, SelectContent, SelectItem, SelectTrigger, SelectValue } from 'ferry-ui'

export default function FieldRenderFunction() {
  return (
    <Field label="Currency" hint="The app uses it for new invoices." className="mx-auto w-full max-w-sm">
      {(control) => (
        <Select defaultValue="eur">
          {/* The trigger takes the focus: it gets the id and the ARIA attributes. */}
          <SelectTrigger {...control} className="w-full">
            <SelectValue />
          </SelectTrigger>
          <SelectContent position="popper">
            <SelectItem value="eur">Euro (EUR)</SelectItem>
            <SelectItem value="usd">US dollar (USD)</SelectItem>
            <SelectItem value="gbp">Pound sterling (GBP)</SelectItem>
          </SelectContent>
        </Select>
      )}
    </Field>
  )
}

import { Button, Field, Input } from 'ferry-ui'
import { Plus } from 'lucide-react'

export default function FieldInputWithButton() {
  return (
    <Field label="Invite by email" hint="The member gets an email with a link." className="mx-auto w-full max-w-sm">
      {(control) => (
        <div className="flex gap-2">
          <Input {...control} type="email" placeholder="maya@example.com" />
          <Button icon={<Plus />} size="md" className="shrink-0">
            Add
          </Button>
        </div>
      )}
    </Field>
  )
}

import { Field, Label, RadioGroup, RadioGroupItem } from 'ferry-ui'

export default function FieldGroup() {
  return (
    <Field label="Billing period" labelAs="span" hint="You can change the period later." className="mx-auto w-full max-w-sm">
      <RadioGroup defaultValue="monthly">
        <Label className="font-normal">
          <RadioGroupItem value="monthly" /> Monthly
        </Label>
        <Label className="font-normal">
          <RadioGroupItem value="yearly" /> Yearly, two months free
        </Label>
      </RadioGroup>
    </Field>
  )
}