Input

Text input field component for forms with consistent styling and accessibility

Installation

pnpm add @wandercom/design-system-web

Usage

5 lines
import { Input } from '@wandercom/design-system-web/ui/input';

export function Example() {
  return <Input type="email" placeholder="Email" />;
}

Examples

Loading example...

Character count

Compose Input (via InputGroupInput) with the useCharacterLimit hook and InputGroupCharacterCount addon to display a live count/max counter. Any input — typing, paste, drop, IME — that would push the value past maxLength is rejected; the value can never exceed the cap. Plug your form library (React Hook Form, TanStack Form, Zod, etc.) into onValueChange to sync state.

Loading example...
22 lines
import {
  InputGroup,
  InputGroupAddon,
  InputGroupCharacterCount,
  InputGroupInput,
  useCharacterLimit,
} from '@wandercom/design-system-web/ui/input-group';

export function Example() {
  const { count, maxLength, inputProps } = useCharacterLimit({
    maxLength: 40,
  });

  return (
    <InputGroup>
      <InputGroupInput {...inputProps} placeholder="Listing title" />
      <InputGroupAddon align="inline-end">
        <InputGroupCharacterCount count={count} maxLength={maxLength} />
      </InputGroupAddon>
    </InputGroup>
  );
}

Props

size?:

'default' | 'sm'
Size variant of the input. Defaults to default.

type?:

string
HTML input type (text, email, password, file, etc.). Defaults to text.

placeholder?:

string
Placeholder text displayed when input is empty.

disabled?:

boolean
Disables the input field when true.

className?:

string
Additional CSS classes to apply.

ref?:

React.Ref<HTMLInputElement>
Forward ref to the underlying input element.
Input