Input

import { Input } from "@/components/ui/input"

export default function InputDemo() {
  return <Input placeholder="Enter text" aria-label="Enter text" />
}

import { Input } from "@/components/ui/input"

export default function InputSm() {
  return <Input size="sm" placeholder="Enter text" aria-label="Enter text" />
}

import { Input } from "@/components/ui/input"

export default function InputLg() {
  return <Input size="lg" placeholder="Enter text" aria-label="Enter text" />
}

import { Input } from "@/components/ui/input"

export default function InputDisabled() {
  return <Input placeholder="Disabled" disabled aria-label="Disabled" />
}

import { Input } from "@/components/ui/input"

export default function InputFile() {
  return <Input type="file" aria-label="File" />
}

import { useId } from "react"

import { Input } from "@/components/ui/input"
import { Label } from "@/components/ui/label"

export default function InputWithLabel() {
  const id = useId()
  return (
    <div className="flex flex-col items-start gap-2">
      <Label htmlFor={id}>Email</Label>
      <Input
        id={id}
        type="email"
        placeholder="you@example.com"
        aria-label="Email"
      />
    </div>
  )
}

import { Button } from "@/components/ui/button"
import { Input } from "@/components/ui/input"

export default function InputWithButton() {
  return (
    <div className="flex gap-2">
      <Input type="email" placeholder="you@example.com" aria-label="Email" />
      <Button variant="outline">Send</Button>
    </div>
  )
}

"use client"

import * as React from "react"

import { Button } from "@/components/ui/button"
import {
  Field,
  FieldControl,
  FieldError,
  FieldLabel,
} from "@/components/ui/field"
import { Form } from "@/components/ui/form"

export default function FormDemo() {
  const [loading, setLoading] = React.useState(false)
  const onSubmit = async (e: React.FormEvent<HTMLFormElement>) => {
    e.preventDefault()
    const formData = new FormData(e.currentTarget)
    setLoading(true)
    await new Promise((r) => setTimeout(r, 800))
    setLoading(false)
    alert(`Email: ${formData.get("email") || ""}`)
  }

  return (
    <Form onSubmit={onSubmit} className="max-w-64">
      <Field>
        <FieldLabel>Email</FieldLabel>
        <FieldControl
          name="email"
          type="email"
          placeholder="you@example.com"
          disabled={loading}
          required
        />
        <FieldError>Please enter a valid email.</FieldError>
      </Field>
      <Button type="submit" disabled={loading}>
        Submit
      </Button>
    </Form>
  )
}