Input

import { useState } from 'react';
import { Input } from '@components-kit/react';

// Basic text input with label
<label htmlFor="name">Name</label>
<Input id="name" placeholder="Enter your name" variantName="default" />

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

// Controlled input
function SearchField() {
  const [value, setValue] = useState('');

  return (
    <Input
      aria-label="Search"
      inputMode="search"
      value={value}
      onChange={(e) => setValue(e.target.value)}
      placeholder="Search components..."
      variantName="default"
    />
  );
}

// With validation error
<label htmlFor="email">Email</label>
<Input
  id="email"
  aria-describedby="email-error"
  aria-invalid="true"
  type="email"
  variantName="error"
/>
<span id="email-error">Please enter a valid email</span>

// Number input with constraints
<label htmlFor="quantity">Quantity</label>
<Input
  id="quantity"
  type="number"
  min="1"
  max="100"
  step="1"
  variantName="default"
/>

// Form integration
<form onSubmit={(e) => e.preventDefault()}>
  <label htmlFor="username">Username</label>
  <Input
    id="username"
    name="username"
    autoComplete="username"
    required
    variantName="default"
  />
</form>