Input Text - Bellhop Design System

Examples

Interactive examples showing different text input configurations and states.

Basic Text Input

A standard text input with label, placeholder text, and helper text.

chevron_right HTML

<bh-input-text
  label="Full name"
  placeholder="John Doe"
  helper-text="Enter your first and last name"
></bh-input-text>

chevron_right React

<BhInputText
  label="Full name"
  placeholder="John Doe"
  helperText="Enter your first and last name"
/>

chevron_right Angular

<bh-input-text
  label="Full name"
  placeholder="John Doe"
  helperText="Enter your first and last name"
></bh-input-text>

With Leading Icon

Text input with an icon at the start to provide visual context about the expected input type.

chevron_right HTML

<bh-input-text
  label="Search"
  placeholder="Search for items..."
  leading-icon="search"
></bh-input-text>

chevron_right React

<BhInputText
  label="Search"
  placeholder="Search for items..."
  leadingIcon="search"
/>

chevron_right Angular

<bh-input-text
  label="Search"
  placeholder="Search for items..."
  leadingIcon="search"
></bh-input-text>

Error State

Text input showing a validation error with error message and visual styling.

chevron_right HTML

<bh-input-text
  label="Email"
  placeholder="[email protected]"
  value="invalid-email"
  error
  error-text="Please enter a valid email address"
></bh-input-text>

chevron_right React

<BhInputText
  label="Email"
  placeholder="[email protected]"
  value="invalid-email"
  error
  errorText="Please enter a valid email address"
/>

chevron_right Angular

<bh-input-text
  label="Email"
  placeholder="[email protected]"
  value="invalid-email"
  error
  errorText="Please enter a valid email address"
></bh-input-text>

When to use

Use text inputs whenever you need to collect short, single-line text information from users.

Form Fields

Collect user information like names, email addresses, phone numbers, or other single-line data.

Search Inputs

Enable users to enter search queries to filter or find content within your application.

Settings and Configuration

Allow users to customize application settings with text-based values or preferences.

Data Entry

Facilitate quick data entry for creating or updating records in tables or databases.

When not to use

For multi-line text—use textarea instead
For date/time selection—use specialized date-picker components
For selecting from predefined options—use select, radio buttons, or dropdown
For numeric input with steppers—use input-number instead

Anatomy

Text inputs consist of a label, input field, and optional helper text and icons.

Label
Text describing what information should be entered in the field
Input Field
Interactive text box where users type their input
Leading Icon (Optional)
Icon displayed at the start of the input to provide context
Placeholder Text (Optional)
Hint text shown when the field is empty
Helper Text (Optional)
Additional instructions or error messages below the input
Required Indicator (Optional)
Asterisk or text showing the field is mandatory

Types

Text inputs support various states and configurations to handle different use cases.

Default

Standard text input with label and optional placeholder text.

With Leading Icon

Input with an icon at the start to provide visual context or indicate input type.

Error State

Input showing validation errors with red border and error message.

Disabled

Non-interactive input with reduced opacity indicating unavailability.

Required

Input marked as required with asterisk indicator.

All States

Comparison of all input states including default, focus, error, and disabled.

Interaction

Text inputs respond to user actions with clear visual feedback and states.

Focus State

Input border highlights when focused, indicating active editing state.

Text Entry

Users can type, select, cut, copy, and paste text using keyboard and mouse.

Validation

Real-time or on-blur validation provides immediate feedback on input errors.

Autocomplete

Supports browser autocomplete for common fields like name, email, and address.

Placement

Text inputs are commonly used in forms, modals, and inline editing scenarios.

Forms

Primary use in registration, login, profile editing, and data collection forms.

Search Bars

Place in navigation headers, toolbars, or dedicated search pages.

Settings Panels

Use in configuration interfaces for entering custom values or preferences.

Inline Editing

Enable direct editing of text within tables, cards, or content areas.

Accessibility

Text inputs follow accessibility best practices for form controls and keyboard interaction.

Keyboard Support

Tab: Navigate to the input field
Typing: Enter text in the focused input
Ctrl/Cmd + A: Select all text
Arrow Keys: Move cursor within text
Home/End: Jump to start or end of text

Labels and Descriptions

All inputs have associated visible labels
Labels are programmatically linked to inputs
Helper text provides additional context or instructions
Error messages are associated with the input field

ARIA Attributes

aria-required: Marks required fields
aria-invalid: Indicates validation errors
aria-describedby: Associates helper text and errors
aria-label: Provides accessible name when visible label isn't used

Visual Design

Clear focus indicators with sufficient contrast
Error states use color plus icons or text
Sufficient color contrast for all text
Large enough touch targets for mobile devices

Related Components

Components that provide similar or complementary functionality.

Component	Usage
Textarea	Use for multi-line text input.
Input Password	Specialized variant for secure password entry.
Input Number	Use for numeric input with validation.
Dropdown	Use for selecting from predefined options.

Resources

Design and development resources for the Input Text component.

Figma

Available

View in Figma →

Web Components/Angular

Available

View in Storybook →

React

Available

View in Storybook →