Input

import { Input } from 'topclassui/input'

/** Outside a Field: a label points at the id, and aria-describedby ties the hint on. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-1">
      <label htmlFor="demo-email" className="text-sm font-medium text-body">Email</label>
      <Input
        id="demo-email"
        name="email"
        type="email"
        autoComplete="email"
        required
        fullWidth
        aria-describedby="demo-email-hint"
      />
      <span id="demo-email-hint" className="text-xs text-muted">We never share it</span>
    </div>
  )
}

import { Input } from 'topclassui/input'

/** Each text type takes its own default cap; a number or a date takes none at all. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-3">
      <Input fullWidth type="email" autoComplete="email" placeholder="you@example.com" aria-label="Email" />
      <Input fullWidth type="password" autoComplete="current-password" placeholder="Password" aria-label="Password" />
      <Input fullWidth type="search" placeholder="Search" aria-label="Search" />
      <Input fullWidth type="tel" autoComplete="tel" placeholder="+962 7 9000 0000" aria-label="Phone" />
      <Input fullWidth type="url" placeholder="https://example.com" aria-label="Website" />
      <Input fullWidth type="number" min={0} max={120} step={1} placeholder="Age" aria-label="Age" />
      <Input fullWidth type="date" aria-label="Start date" />
      <Input fullWidth maxLength={6} placeholder="Six characters" aria-label="Short code" />
      <Input fullWidth maxLength={null} placeholder="No cap" aria-label="Uncapped" />
    </div>
  )
}

import { Input } from 'topclassui/input'

export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Input size="xs" placeholder="Extra small" aria-label="Extra small" />
      <Input size="sm" placeholder="Small" aria-label="Small" />
      <Input placeholder="Medium" aria-label="Medium" />
      <Input size="lg" placeholder="Large" aria-label="Large" />
      <Input size="xl" placeholder="Extra large" aria-label="Extra large" />
    </div>
  )
}

import { Input } from 'topclassui/input'

export default function Demo() {
  return (
    <div className="grid max-w-md justify-items-start gap-3">
      <Input fullWidth placeholder="Fills its container" aria-label="Full width" />
      <Input placeholder="Keeps its own width" aria-label="Own width" />
    </div>
  )
}

import { Button } from 'topclassui/button'
import { Input } from 'topclassui/input'

/** A grid form sizes its track to the content, so only an input that can shrink fits a phone. */
export default function Demo() {
  return (
    <form className="grid gap-4">
      <div data-row="own" className="flex gap-2">
        <Input name="first" placeholder="First name" aria-label="First name" />
        <Input name="last" placeholder="Last name" aria-label="Last name" />
      </div>
      <div data-row="grow" className="flex gap-2">
        <Input name="city" className="flex-1" placeholder="City" aria-label="City" />
        <Input name="postcode" className="flex-1" placeholder="Postcode" aria-label="Postcode" />
      </div>
      <div data-row="alone">
        <Input name="phone" type="tel" placeholder="+962 7 9000 0000" aria-label="Phone" />
      </div>
      {/* flex-1 makes the field the one that gives way, so the Button keeps its whole label. */}
      <div data-row="action" className="flex gap-2">
        <Input name="invite" type="email" className="flex-1" placeholder="name@company.com" aria-label="Invite by email" />
        <Button>Send invite</Button>
      </div>
    </form>
  )
}

import { Input } from 'topclassui/input'

/** custom emits no height, padding or type step, so the caller's own classes set them. */
export default function Demo() {
  return (
    <div className="flex flex-wrap items-center gap-3">
      <Input placeholder="On the scale" aria-label="On the scale" />
      <Input size="custom" className="h-14 px-5 text-lg" placeholder="Your own size" aria-label="Your own size" />
    </div>
  )
}

import { InputSkeleton } from 'topclassui/input'

/** Its own width at each size, as the field has, and the whole column with fullWidth. */
export default function Demo() {
  return (
    <div className="grid max-w-sm gap-3">
      <InputSkeleton size="sm" />
      <InputSkeleton />
      <InputSkeleton size="lg" />
      <InputSkeleton fullWidth />
    </div>
  )
}

import { Input } from 'topclassui/input'

export default function Demo() {
  return (
    <div dir="rtl" lang="ar" className="grid max-w-sm gap-3">
      <label htmlFor="demo-name-ar" className="text-sm font-medium text-body">الاسم</label>
      <Input id="demo-name-ar" fullWidth placeholder="اكتب اسمك" />
      <Input type="email" fullWidth defaultValue="omar@example.com" aria-label="البريد الإلكتروني" />
      <Input type="number" fullWidth defaultValue="-1234.5" aria-label="الرصيد" />
      <Input invalid fullWidth defaultValue="٠٧٩" aria-label="رقم الهاتف" />
    </div>
  )
}