Search Input Field
Search Input Field is used to allow users to enter search queries and filter through content.
Last updated
Search Input Field is used to allow users to enter search queries and filter through content.
Last updated
Search fields are used in applications where users need to search for information, such as on websites, in databases, or in content-heavy applications. They are ideal for scenarios requiring quick and efficient information retrieval.
A search field component typically includes a label, an input area for entering search queries, and optional elements like a clear button and helper text for guidance. It may also feature different states, such as focused, filled, or error, to reflect its current status. Search fields enable users to quickly locate specific information by entering keywords or phrases, streamlining their search experience.
aria_label
The aria-label attribute for the search input element, used to enhance accessibility by providing a textual description.
string
button_aria_label
The aria-label attribute for the buttons in the component, which helps provide a clear description for screen readers.
string
button_id
The ID to be assigned to the button elements for accessibility and targeting purposes.
string
component_mode
An optional property for specifying a particular mode or variant of the component, which can be used to alter its appearance or behavior based on the context.
string
custom_class
A string of additional custom CSS classes that can be applied to the input container for further styling customization.
string
error_message
Custom error message displayed when the input field has an error. Appears below the input if has_error is true.
string
has_error
A boolean flag indicating whether the input field has an error. If true, it triggers error styling and the error message display.
boolean
helper_text
Text displayed below the input field to assist users, such as instructions or tips.
string
input_status
Specifies the status of the input field, e.g., "valid" or "invalid". This can be used to apply custom styling based on the field’s state.
string
label
The label text for the search input. This label is displayed above the input field.
string
placeholder
The placeholder text to be displayed inside the input field when it is empty. Default is "Search".
string
show_button
A boolean flag to control the visibility of the "Search" button. If true, the button is shown; otherwise, it is hidden.
boolean
size
Specifies the size of the input field. Default is 'sm' (small). Can be adjusted to other sizes like 'md' (medium) or 'lg' (large) depending on the desired appearance.
string
Label: Describes the function or purpose of the search field, here labeled as "Search."
Lead-Icon: An icon placed at the beginning of the input field, usually representing the action or purpose, like a magnifying glass for search.
Placeholder: Text that appears within the input field when it’s empty, providing a hint or example for what to type, such as "Search."
Button: A clickable element labeled "Search" that initiates the search action when pressed.
Caption: Additional helper or footer text below the field, providing more context or instructions to the user.
Use search fields to allow users to quickly find specific information.
Don't use search fields for inputs that are not related to search or query purposes.
Label the search field clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for search fields.
Include a placeholder text to guide users on what to search for.
Don't rely solely on placeholder text for essential instructions.
Provide a clear button to allow users to quickly clear the search input.
Don't omit the clear button if the search input field is long or complex.
Ensure the search field is large enough to be easily tappable or clickable.
Avoid making the search field too small to interact with comfortably.
Use helper text to provide additional context or instructions, if necessary.
Don't overload the search field with too much information.
Validate input and provide clear error messages when necessary.
Don't provide generic error messages that don't help users understand the issue.
Keep consistent styling and spacing across all search fields in the application.
Don't use inconsistent styles that may confuse users.
