oneslash-design-system

Text Field

A single-line text input component for collecting user input such as names, emails, search queries, and other short text entries.

Sizes

Large

Medium

Small

Input Types

Supports text, password, email, number, tel, url, and search types.

Password

States

Error

This field is required

Disabled

Required

Submit on Ctrl/Cmd+Enter

Use the onSubmit prop to handle submission when the user presses Ctrl+Enter (or Cmd+Enter on Mac).

Press Ctrl/Cmd+Enter to submit

interface TextFieldProps {
  id: string;
  type?: 'text' | 'password' | 'email' | 'number' | 'tel' | 'url' | 'search';
  label?: string;
  value: string;
  placeholder?: string;
  required?: boolean;
  onChange: (e: React.ChangeEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onBlur?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onFocus?: (e: React.FocusEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onKeyDown?: (e: React.KeyboardEvent<HTMLInputElement | HTMLTextAreaElement>) => void;
  onSubmit?: () => void; // Triggered on Ctrl/Cmd+Enter
  autoFocus?: boolean;
  multiline?: boolean;
  maxRows?: number;
  disabled?: boolean;
  error?: boolean;
  size?: 'large' | 'medium' | 'small';
}