Input

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

export default function InputHero() {
  return (
    <Field label="Project name" hint="The name shows in the list of projects." className="w-full max-w-sm">
      <Input placeholder="Billing portal" />
    </Field>
  )
}

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

export default function InputLabel() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="billing-email">Billing email</Label>
      <Input id="billing-email" type="email" placeholder="maya@example.com" />
    </div>
  )
}

import { Input } from 'ferry-ui'

export default function InputSizes() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-3">
      <Input size="tiny" placeholder="Tiny, 26px" aria-label="Tiny input" />
      <Input size="sm" placeholder="Small, 30px" aria-label="Small input" />
      <Input size="md" placeholder="Medium, 34px" aria-label="Medium input" />
      <Input size="lg" placeholder="Large, 38px" aria-label="Large input" />
    </div>
  )
}

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

export default function InputWithButton() {
  return (
    <div className="flex w-full max-w-sm gap-2">
      <Input size="sm" type="email" placeholder="maya@example.com" aria-label="Email of the new member" />
      <Button size="sm" variant="primary">
        Invite
      </Button>
    </div>
  )
}

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

export default function InputMono() {
  return (
    <Field label="Webhook URL" hint="The app sends each event to this address." className="w-full max-w-sm">
      <Input mono type="url" placeholder="https://example.com/webhooks" />
    </Field>
  )
}

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

export default function InputStates() {
  return (
    <div className="flex w-full max-w-sm flex-col gap-5">
      <Field label="Workspace" hint="Only an owner can change the name.">
        <Input disabled defaultValue="Acme" />
      </Field>
      <Field label="Project ID">
        <Input readOnly mono defaultValue="prj_8f2k1m9x" />
      </Field>
      <Field label="Billing email" error="Enter a valid email address.">
        <Input type="email" defaultValue="maya@example" />
      </Field>
    </div>
  )
}

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

export default function InputControlled() {
  const [name, setName] = React.useState('Billing portal')
  const slug = name
    .trim()
    .toLowerCase()
    .replace(/[^a-z0-9]+/g, '-')

  return (
    <Field label="Project name" hint={`Slug: ${slug === '' ? 'none' : slug}`} className="w-full max-w-sm">
      <Input value={name} onChange={(event) => setName(event.target.value)} />
    </Field>
  )
}

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

const SEAT_PRICE = 20

export default function InputVariantsHelper() {
  const [seats, setSeats] = React.useState('12')
  const total = (Number(seats) || 0) * SEAT_PRICE

  return (
    <div className="flex w-full max-w-sm flex-col gap-2">
      <Label htmlFor="plan-seats">Seats</Label>
      <div className="flex gap-2">
        <Input
          id="plan-seats"
          type="number"
          size="sm"
          min={1}
          className="w-24"
          value={seats}
          onChange={(event) => setSeats(event.target.value)}
        />
        <output
          htmlFor="plan-seats"
          aria-label="Monthly total"
          className={inputVariants({ size: 'sm', mono: true, className: 'flex items-center' })}
        >
          ${total}.00 / month
        </output>
      </div>
    </div>
  )
}