Input

Text, search, numeric and date inputs with prefix and suffix slots.

Installation

pnpm add github:ahmadassaf/design-system

import Input from '@gaudi/design-system/core/Input';

Usage

import Input, { EmailInput } from '@gaudi/design-system/core/Input';
<>  <Input aria-label='Project name' value={name} onChange={event => setName(event.target.value)} />  <EmailInput aria-label='Email address' name='email' required /></>

Playground

import Input from '@gaudi/design-system/core/Input';
<Input placeholder='you@example.com' />

Examples

Addon placement

AI prompt inputs

Multi-field composer

Dropdown selectors

Hints and states

Inline actions

Search with filters

Labels and messages

Password with strength meter

Style variants

Input types

API

Accessibility

Compose Field, FieldLabel, FieldDescription and FieldError. Keep labels visible and connect errors to their control.

Notes

• EmailInput is a named export from the Input entry. It composes Input with a text editor, an email keyboard hint, email autocomplete and single-address pattern validation, so it supports smooth caret mode.
• EmailInput fixes type=text and inputMode=email; multiple addresses are unsupported. An additional pattern narrows the allowed addresses. Invalid author patterns are ignored while email validation remains active.
• EmailInput keeps raw text (spaces are invalid), reports patternMismatch instead of typeMismatch, and leaves custom error copy to FieldError/onInvalid. required, minLength/maxLength, name, form, value/defaultValue, refs and event handlers reach the native editor.
• Smooth caret is enabled by default. Use EmailInput for addresses and NumberField for numeric values throughout forms and examples; reserve native email/number types for documented semantic exceptions. Provider and per-field caretMode=native overrides remain available.

Related