Input

import { Input } from 'regen-ui'

export function EmailField() {
  return (
    <Input
      label="Email"
      placeholder="alice@example.com…"
      prefix="@"
      suffix=".com"
      type="email"
    />
  )
}

import { Fields, Input } from 'regen-ui'

export function NameFields() {
  return (
    <Fields.Inline className="max-w-[420px]">
      <Input label="First name" placeholder="Jane" />
      <Input label="Last name" placeholder="Doe" />
    </Fields.Inline>
  )
}

import { Calendar, Eye } from 'lucide-react'
import { Button, Fields, Input } from 'regen-ui'

export function IdentityForm() {
  return (
    <Fields className="max-w-[420px]">
      <Fields.Inline>
        <Input label="First name" placeholder="Jane" />
        <Input label="Last name" placeholder="Doe" />
      </Fields.Inline>
      <Input
        label="Date of birth"
        placeholder="mm/dd/yyyy"
        suffix={
          <Button.Icon size="md" title="Open calendar">
            <Calendar />
          </Button.Icon>
        }
      />
      <Input
        error="Enter the full SSN."
        label="Social security number"
        placeholder="123-45-6789"
        suffix={
          <Button.Icon size="md" title="Show SSN">
            <Eye />
          </Button.Icon>
        }
      />
    </Fields>
  )
}

import { useState } from 'react'
import { Input } from 'regen-ui'

export function PaymentAmount() {
  const [value, setValue] = useState('')

  return (
    <Input.Amount
      error={Number(value) > 250 ? 'Amount exceeds available balance.' : undefined}
      onChange={setValue}
      onMax={() => setValue('250')}
      prefix="$"
      value={value}
    />
  )
}