Input
Editable single-line text input field
Introduction
Input fields are used in multiple ways in Bifrost. They can be used for simple single-line of text, password input, search fields, and more. Input fields can also have various states, such as disabled, read-only, and error states.
Variants
- Basic input: Form input field
- Search input with icon: Search input field with a simple icon
- Search input with button: Search input field with a search icon button
Interactive demo
Try the interactive demo below to explore the Input component.
Basic input
This is one of the most common input field types. It is used for single-line text input. If you need to input multiple lines of text, consider using a TextArea component instead.
Use descriptive labels and icons (optional). Use description to provide additional context for the input field if needed.
Avoid hiding labels. Placeholders should not be used as a substitute for labels or description, as they disappear when the user starts typing. Placeholders are not accessible for users who use screen readers.
Search Input
Search inputs are used to allow users to search for content within a page or application. There are two main variants of search inputs in Bifrost. Here are the guidelines for when to use each variant:
- Search with icon: Use when the search results are updated automatically as the user types.
- Search with button: Use when the search results are updated when the user clicks the search button.
We also support live filtering and a global search hotkey. Learn more in the Search documentation.
Anatomy
The input component consists of several parts that work together. Here are the main parts of the input component:
- Label: Descriptive text that indicates the purpose of the input field.
- Description: Additional context or instructions for the input field.
- Value: What the user has typed into the input field.
- Placeholder: A hint that describes the expected value of the input field.
- Icon: An icon that can be placed on the left or right side of the input field.
- Optional/required: A text that tells if the input field is optional/required.
- Feedback: A message that provides feedback to the user about their input.
- Clearable: An optional feature that allows users to clear the input field with a single click.
- Small: A reduced height version of the input.
For guidance on using inputs in forms and related usage rules, check out the Forms documentation.
Disabled vs Read-only
We have two different states for non-editable input fields:
- Disabled: Can't be focused, edited, or read by screen readers. It does not meet WCAG contrast requirements.
- Read-only: Input is interactive and can be focused, but not edited. Use when you want to display information.
In general, use read-only over disabled for better accessibility.
Inputs in components
Inputs can be used within various components. See the links below for more information on how inputs can be integrated with these components