Input

import { Input } from 'poodle'

<Input placeholder="Enter text..." />

<Input type="text" placeholder="Text input" />
<Input type="email" placeholder="Email input" />
<Input type="password" placeholder="Password input" />
<Input type="number" placeholder="Number input" />

<Input size="sm" placeholder="Small" />
<Input size="md" placeholder="Medium" />
<Input size="lg" placeholder="Large" />

<Input placeholder="Default" />
<Input placeholder="Disabled" disabled />
<Input placeholder="Error" error />
<Input value="Success" success readOnly />

<label htmlFor="email">Email Address</label>
<Input id="email" type="email" placeholder="you@example.com" />

<Input type="password" placeholder="Enter password" />
<span className="text-sm text-gray-500">
  Must be at least 8 characters
</span>

<Input type="email" placeholder="Email" error />
<span className="text-sm text-red-600">
  Please enter a valid email
</span>

function ControlledInput() {
  const [value, setValue] = useState('')
 
  return (
    <Input
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Type here..."
    />
  )
}

function ValidatedInput() {
  const [email, setEmail] = useState('')
  const [error, setError] = useState('')
 
  const validate = (value: string) => {
    if (!value.includes('@')) {
      setError('Invalid email')
    } else {
      setError('')
    }
  }
 
  return (
    <div>
      <Input
        type="email"
        value={email}
        onChange={(e) => {
          setEmail(e.target.value)
          validate(e.target.value)
        }}
        error={!!error}
      />
      {error && <span className="text-red-600">{error}</span>}
    </div>
  )
}

function SearchInput() {
  const [query, setQuery] = useState('')
 
  return (
    <div className="relative">
      <Input
        type="search"
        placeholder="Search..."
        value={query}
        onChange={(e) => setQuery(e.target.value)}
      />
      <SearchIcon className="absolute right-3 top-1/2 -translate-y-1/2" />
    </div>
  )
}