Input

Text input field component for forms with consistent styling and accessibility

Installation

pnpm add @wandercom/design-system-web

Usage

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

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

Examples

Loading example...

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