Input ✦Documentation has not yet been reviewed by a human.

<Input size="small"  label="Small"  placeholder="Enter text…" autoComplete="off" />
<Input size="medium" label="Medium" placeholder="Enter text…" autoComplete="off" /> {/* default */}
<Input size="large"  label="Large"  placeholder="Enter text…" autoComplete="off" />

<Input label="Primary" placeholder="Filled field" autoComplete="off" />
<Input priority="secondary" label="Secondary" placeholder="Outlined field" autoComplete="off" />
<Input priority="tertiary" label="Tertiary" placeholder="Field on hover or focus" autoComplete="off" />

<Input label="Display name" defaultValue="Ada Lovelace" autoComplete="name" />
<Input label="API key" hint="Find this in Settings → Developers." placeholder="sk-…" autoComplete="off" />

<Input label="API key" placeholder="sk-…" autoComplete="off">
  <Tooltip>Find this in Settings → Developers.</Tooltip>
</Input>

{/* No status = neutral helper text */}
<Input label="Display name" defaultValue="Ada Lovelace" hint="This is your public name." autoComplete="name" />
<Input label="Workspace" defaultValue="acme" status="info" hint="Lowercase letters and dashes only." autoComplete="off" />
<Input label="Username" defaultValue="ada" status="success" hint="Username is available." autoComplete="username" />
<Input label="Password" type="password" defaultValue="hunter2" status="warning" hint="Weak — add more characters." autoComplete="new-password" />
<Input label="Email" type="email" defaultValue="not-an-email" status="critical" hint="Enter a valid email address." autoComplete="email" />
<Input label="Plan" defaultValue="Pro" status="brand" hint="You're on the Pro plan." autoComplete="off" />

import { useState } from 'preact/hooks'
import { Input, Icon, Button } from '@antadesign/anta'

function SearchActions() {
  const [caseSensitive, setCaseSensitive] = useState(false)
  const [regex, setRegex] = useState(false)
  return (
    <>
      <Button priority="tertiary" icon="case-sensitive"
        aria-label="Case sensitive" title="Case sensitive"
        selected={caseSensitive} aria-pressed={caseSensitive}
        onClick={() => setCaseSensitive(value => !value)} />
      <Button priority="tertiary" icon="regex"
        aria-label="Regular expression" title="Regular expression"
        selected={regex} aria-pressed={regex}
        onClick={() => setRegex(value => !value)} />
    </>
  )
}

function Demo() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px', width: '100%', maxWidth: '320px' }}>
      <Input label="Leading icon" placeholder="Search…" leading={<Icon shape="search" />} autoComplete="off" />
      <Input label="Trailing actions" placeholder="Search…" trailing={<SearchActions />} dimActions autoComplete="off" />
      <Input label="Clear action" placeholder="Search…" clearable dimActions defaultValue="design tokens" autoComplete="off" />
      <Input label="All adornments" leading={<Icon shape="search" />} trailing={<SearchActions />} clearable dimActions defaultValue="design tokens" autoComplete="off" />
      <Input label="Text adornments" leading="from" trailing="each" defaultValue="$20" autoComplete="off" />
    </div>
  )
}

const [reveal, setReveal] = useState(false)

<Input
  label="Password"
  autoComplete="current-password"
  type={reveal ? 'text' : 'password'}
  defaultValue="hunter2"
  dimActions
  trailing={
    <Button
      priority="tertiary"
      icon={reveal ? 'eye-closed' : 'eye'}
      aria-label={reveal ? 'Hide password' : 'Show password'}
      onClick={() => setReveal(v => !v)}
    />
  }
/>

{/* Grows with content, then scrolls */}
<Input multiline maxRows={6} label="Bio (autogrows)" placeholder="Tell us…" autoComplete="off" />

{/* Keeps a fixed height */}
<Input multiline rows={3} label="Notes (fixed height)" placeholder="…" autoComplete="off" />

// Uncontrolled: the element updates its value after input.
<Input label="Name" defaultValue="Ada" autoComplete="name" onChange={(e) => console.log(e.target.value)} />

// Controlled: application state supplies the value.
const [value, setValue] = useState('')
<Input label="Name" value={value} autoComplete="name" onInput={(e) => setValue(e.target.value)} />

<form>
  <Input name="email" label="Email" type="email" autoComplete="email" required clearable />
  <Button tone="brand" type="submit" label="Sign up" />
  <Button priority="tertiary" type="reset" label="Reset" />
</form>

<Input type="text"     label="Text"     autoComplete="off" />
<Input type="email"    label="Email"    autoComplete="email" />
<Input type="password" label="Password" autoComplete="current-password" />
<Input type="tel"      label="Tel"      autoComplete="tel" />
<Input type="url"      label="URL"      autoComplete="url" />
<Input type="number"   label="Number"   autoComplete="off" min={0} max={100} />

import { useState } from 'preact/hooks'
import { Input, Button } from '@antadesign/anta'

function Demo() {
  const [errors, setErrors] = useState<Record<string, string | undefined>>({})

  function onSubmit(e: SubmitEvent) {
    e.preventDefault()
    const next: Record<string, string | undefined> = {}
    const form = e.currentTarget as HTMLFormElement
    form.querySelectorAll('a-input').forEach((el: any) => {
      if (!el.checkValidity()) next[el.name] = el.validationMessage
    })
    setErrors(next)
  }
  const clearError = (name: string) => setErrors(previous => ({ ...previous, [name]: undefined }))

  return (
    <form noValidate onSubmit={onSubmit}
      style={{ display: 'flex', flexDirection: 'column', gap: '14px', width: '300px' }}>
      <Input name="email" label="Email" type="email" autoComplete="email"
        placeholder="[email protected]" required hint={errors.email}
        status={errors.email ? 'critical' : undefined}
        onInput={() => clearError('email')} />
      <Input name="site" label="Website" type="url" autoComplete="url"
        placeholder="https://…" hint={errors.site}
        status={errors.site ? 'critical' : undefined}
        onInput={() => clearError('site')} />
      <Input name="age" label="Age" type="number" autoComplete="off"
        placeholder="18 – 120" min="18" max="120" hint={errors.age}
        status={errors.age ? 'critical' : undefined}
        onInput={() => clearError('age')} />
      <div style={{ display: 'flex', gap: '8px' }}>
        <Button type="submit" tone="brand" label="Submit" />
        <Button type="reset" priority="tertiary" label="Reset" onClick={() => setErrors({})} />
      </div>
    </form>
  )
}