Textarea

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

export default function TextareaHero() {
  return (
    <Field label="Description" optional hint="The description shows on the project page." className="w-full max-w-md">
      <Textarea placeholder="What is this project for?" />
    </Field>
  )
}

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

const RELEASE_NOTES = [
  '- Invoices: the list loads faster.',
  '- Invoices: a filter by status.',
  '- Members: an owner can change a role from the list.',
  '- Members: an invitation stays valid for seven days.',
  '- API keys: each key shows the date of its last use.',
  '- Orders: the export contains the customer email.',
  '- Projects: the search finds archived projects.',
  '- Settings: a new page for the billing address.',
  '- Fixed: the total of an order with a discount.',
  '- Fixed: the date format in the exports.',
].join('\n')

export default function TextareaMaxHeight() {
  return (
    <Field label="Release notes" className="w-full max-w-md">
      <Textarea className="max-h-40" defaultValue={RELEASE_NOTES} />
    </Field>
  )
}

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

export default function TextareaFixed() {
  return (
    <Field label="Short note" className="w-full max-w-md">
      <Textarea className="field-sizing-fixed" rows={3} placeholder="Three rows, always" />
    </Field>
  )
}

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

const PAYLOAD = `{
  "event": "invoice.paid",
  "invoice": "INV-2041",
  "amount": 1280,
  "currency": "eur"
}`

export default function TextareaMono() {
  return (
    <Field label="Test payload" hint="The app sends this JSON to your endpoint." className="w-full max-w-md">
      <Textarea mono defaultValue={PAYLOAD} />
    </Field>
  )
}

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

export default function TextareaStates() {
  return (
    <div className="flex w-full max-w-md flex-col gap-5">
      <Field label="Notes">
        <Textarea disabled defaultValue="You cannot edit an archived project." />
      </Field>
      <Field label="Reason" error="Enter 10 characters or more.">
        <Textarea defaultValue="Too short" />
      </Field>
    </div>
  )
}

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

const MAX_LENGTH = 280

export default function TextareaControlled() {
  const [message, setMessage] = React.useState('')

  return (
    <Field label="Feedback" hint={`${MAX_LENGTH - message.length} characters left`} className="w-full max-w-md">
      <Textarea
        placeholder="What must we change on the billing page?"
        maxLength={MAX_LENGTH}
        value={message}
        onChange={(event) => setMessage(event.target.value)}
      />
    </Field>
  )
}