Input

Input is the base text field the rest of the library is built on. It is a thin wrapper over the native <input> — it forwards its ref and spreads every standard attribute (type, value, placeholder, disabled, etc.) — adding focus, disabled, and invalid styling. Set aria-invalid (which Field and FormControl do for you) to switch it to the error state.

Example

import { Input } from '@officina/ui';
import { useState } from 'react';

function Example() {
  const [value, setValue] = useState('');
  return (
    <Input
      type="email"
      placeholder="you@example.com"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

API

Input adds no props of its own. It forwards all standard <input> attributes (plus ref and className) to the underlying element.