BDS

Input

Inputs collect structured user information for forms and inline editing. Use clear labels and validation hints to reduce user errors.

Input

Password must be at least 8 characters.

Features

  • Floating labels for compact, readable form layouts.
  • Built-in error messaging and invalid state styling.
  • Supports native attributes for validation and behavior.
  • Consistent spacing, typography, and semantic token usage.

When to use

Use inputs for short, single-line data such as names, emails, passwords, IDs, and concise search/filter controls.

Accessibility

Keep labels meaningful, associate error text with fields, preserve visible keyboard focus, and avoid using placeholder-only instructions for critical guidance.

Best Practices

Do

Use Specific Field Labels

Write labels like 'Email address' or 'Account number' so users immediately know what format or value is expected.

Keep Validation Close

Show validation guidance and errors directly beneath the field so people can correct issues without scanning the page.

Choose the Right Input Type

Use native types such as 'email', 'password', or 'number' to support better keyboards, autofill, and built-in browser behavior.

Use Textarea for Longer Responses

Keep Input focused on short, single-line values and move comments, notes, or descriptions to Textarea.

Don't

Use Vague Labels

Avoid labels like 'Info' or 'Details' because they force users to guess what should be entered.

Rely on Placeholder Text Alone

Do not place essential instructions only in placeholder text because it disappears once the field has content.

Show Premature Errors

Avoid displaying an error state before the user has had a reasonable chance to interact with the field.

Force Long Content Into One Line

Do not use a single-line input for messages, descriptions, or other extended responses.

Hide Validation Rules Elsewhere

Keep important format rules and constraints near the field instead of burying them in distant helper text.

Props API

NameTypeDescription
labelstringVisible floating label and default placeholder text.
errorstringShows validation message and error styles when provided.
typestringNative input type such as text, email, password, and number.
idstringOptional explicit ID used to connect the input, label, and error message.
...propsReact.InputHTMLAttributes<HTMLInputElement>Supports native input attributes like required, disabled, autoComplete, defaultValue, and name.