Design System Beacon

Input Field

Input fields allow users to enter and edit text. Use input fields for single-line text input, search queries, and form data entry.

Overview

Input fields are form controls that allow users to enter and edit text. They provide a clear visual indication of state and support various features like icons, prefixes, and error messages.

All input field styles are built using design tokens, ensuring consistency across themes and hues. Use the interactive playground below to explore all available combinations.

Interactive Playground

Use the controls to customize the input field and see how it looks in real-time.

Size

Status

Icon Only

Label

Placeholder

Value

Show Label

Start Icon

End Icon

Placeholder Icon

Number Prefix

Corner Radius

Label

Placeholder

<InputField />

Anatomy

An input field consists of several parts that work together to create a cohesive text input control.

Label

Placeholder

Error message!

LabelOptional text label above input

Input ContainerBorder, padding, border-radius

Start IconOptional icon at the beginning

Text/PlaceholderInput text or placeholder text

End IconOptional icon at the end

Error Icon & MessageOptional error feedback below input

Usage Guidelines

Use input fields for single-line text input.
Provide clear, descriptive labels for each input field.
Use placeholder text to guide users on what to enter.
Show error messages immediately after validation fails.
Use icons to provide additional context or visual cues.
Ensure sufficient spacing between input fields and labels.
Use appropriate input sizes based on context and importance.

Don't

Don't use input fields for multi-line text (use textarea instead).
Don't use placeholder text as the only label.
Don't show error messages before the user has interacted with the field.
Don't overload input fields with too many icons.
Don't use input fields for navigation (use buttons or links instead).
Don't disable input fields without explaining why.
Don't use icon-only inputs without clear context or tooltips.

Accessibility

Always associate input fields with labels using proper HTML structure or ARIA attributes.
Ensure sufficient color contrast between text and background.
Provide keyboard navigation support (Tab to navigate, Enter to submit).
Use error messages that are clear and actionable.
Ensure input fields are large enough to be easily clickable (minimum 28px height).
Provide clear visual feedback for all interactive states (hover, focus, error).
Use appropriate input types (email, tel, number) for better mobile keyboard support.

API Reference

Input field component props and types.

InputFieldProps

interface InputFieldProps {
  label?: string;
  placeholder?: string;
  value?: string;
  size?: "sm" | "md" | "lg" | "xl";
  status?: "default" | "hover" | "active" | "error" | "disabled";
  showLabel?: boolean;
  showStartIcon?: boolean;
  showEndIcon?: boolean;
  showPlaceholderIcon?: boolean;
  showNumberPrefix?: boolean;
  iconOnly?: boolean;
  borderRadius?: string;
  rounded?: boolean;
  onChange?: (value: string) => void;
}

Props

label

string

"Label"

Text label displayed above the input field.

placeholder

string

"Placeholder"

Placeholder text displayed when input is empty.

value

string

""

Current value of the input field.

size

"sm" | "md" | "lg" | "xl"

"md"

Input field size: sm (28px), md (36px), lg (48px), xl (56px).

status

"default" | "hover" | "active" | "error" | "disabled"

"default"

Visual state of the input field: default, hover, active (focused), error, or disabled.

showLabel

boolean

true

Whether to display the label above the input field.

showStartIcon

boolean

false

Whether to display an icon at the start of the input field.

showEndIcon

boolean

false

Whether to display an icon at the end of the input field.

showPlaceholderIcon

boolean

false

Whether to display a placeholder icon when input is empty.

showNumberPrefix

boolean

false

Whether to display a number prefix (e.g., "+33") with border separator.

borderRadius

string

—

Custom border radius value. Overrides the default border radius for the size.

rounded

boolean

false

Whether to use fully rounded (pill-shaped) corners. Shorthand for borderRadius="var(--corner-radius-full)".

iconOnly

boolean

false

Whether to display only an icon (circular/square button variant).

borderRadius

string

—

Custom border radius value. Overrides the default border radius for the size.

onChange

(value: string) => void

—

Callback function called when input value changes.

Usage Examples

Copyable code snippets for common input field use cases.

Basic Input Field

import { Input } from 'beacon-ui';

<Input 
  placeholder="Placeholder"
/>

Input with Label

import { Input } from 'beacon-ui';

<Input 
  label="Email"
  placeholder="Enter your email"
/>

Input with Icons

import { Input } from 'beacon-ui';
import { SearchIcon, UserPersonIcon } from 'beacon-icons';

<Input 
  placeholder="Search"
  defaultValue="Search query"
  placeholderIcon={<SearchIcon size="xs" />}
  startIcon={<UserPersonIcon size="xs" />}
/>

Input with Active State

import { Input } from 'beacon-ui';

<Input 
  label="Email"
  placeholder="Enter your email"
  defaultValue="user@example.com"
  status="active"
/>

Input with Hover State

import { Input } from 'beacon-ui';

<Input 
  label="Email"
  placeholder="Enter your email"
  defaultValue="user@example.com"
  status="hover"
/>

Input with Error

Error message!

import { Input } from 'beacon-ui';

<Input 
  label="Email"
  placeholder="Enter your email"
  defaultValue="invalid@email"
  status="error"
/>

Input with Number Prefix

Phone

import { Input } from 'beacon-ui';

<Input 
  label="Phone"
  placeholder="123456789"
  defaultValue="123456789"
  numberPrefix="+1"
/>

Rounded Input

import { Input } from 'beacon-ui';

<Input 
  placeholder="Search"
  defaultValue="Search query"
  borderRadius="var(--corner-radius-full)"
/>

Icon Only Input

import { Input } from 'beacon-ui';
import { SearchIcon } from 'beacon-icons';

<Input 
  iconOnly
  placeholderIcon={<SearchIcon size="xs" />}
/>

Disabled Input

import { Input } from 'beacon-ui';

<Input 
  label="Email"
  placeholder="Enter your email"
  status="disabled"
/>