Select Input Field
Select Input Field allows users to choose an option from a predefined list, making it easy to select a specific value while ensuring data consistency.
Last updated
Select Input Field allows users to choose an option from a predefined list, making it easy to select a specific value while ensuring data consistency.
Last updated
Select fields are used in forms and other input scenarios where users need to choose from a predefined list of options. They are especially useful in situations with many options, as a dropdown list conserves space and simplifies the selection process.
A select field component typically includes a label, a dropdown list of options, and optional elements like placeholder text and helper text to assist users. It can display different states, such as focused, filled, or error, to indicate its current status. The select field can be configured to allow single or multiple selections, depending on the specific requirement.
aria_label
Provides an accessible label for screen readers. It helps improve accessibility by describing the button's purpose for users with disabilities.
string
button_id
The id attribute of the select button. It helps uniquely identify the button and is typically used for accessibility purposes or styling.
string
component_mode
A mode or state that can be used to modify the component’s behavior or appearance based on different configurations, such as ‘read-only’ or ‘edit’.
string
custom_class
A custom CSS class to be applied to the component for additional styling customization.
string
disabled
If set to true, the select dropdown will be disabled, preventing user interaction.
boolean
error
A string that determines if there is an error related to the select input. This value can be used to apply specific styling or logic for error states.
string
error_message
A message that will be displayed when the error prop is set, typically used to display validation errors.
string
helper_text
Additional text that provides guidance or hints to the user, usually displayed below the select input field.
string
label
The text that will be displayed as the label for the select input. It provides a description or instruction for the user about the input field.
string
options
A JSON string representing an array of options to be displayed in the dropdown. Each option is displayed as a clickable item. Ensure the string is valid JSON formatted like ["Option1", "Option2", "Option3"].
string
selected
The currently selected option from the dropdown. This value is displayed on the button as the selected option.
string
size
Specifies the size of the input field (e.g., small, medium, large). This can be used to apply different sizing classes.
string
toggle_button_name
Name attribute which toggles the dropdown
string
option_select_button_name
Name attribute for the dropdown option selections
string
Label: Indicates the purpose of the dropdown, labeled as "Select" in this example.
Placeholder: Provides guidance on the action, displaying text like "Select Option" within the dropdown box before any option is selected.
Lead-Icon: Positioned at the beginning of the dropdown, offering a visual cue related to the dropdown’s function.
Dropdown Icon: A visual indicator (typically a down arrow) showing that additional options are available upon interaction.
Caption: Additional helper or footer text below the dropdown, offering more details or context for the user.
Use select fields to present users with a list of options to choose from.
Don't use select fields for inputs that are better suited to other input types, like text fields or radio buttons.
Label the select field clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for select fields.
Include placeholder text to guide users on what to select.
Don't rely solely on placeholder text for essential instructions.
Provide helper text to explain any specific instructions or requirements.
Don't overload the select field with too much information.
Ensure the select field is large enough to be easily tappable or clickable.
Avoid making the select field too small to interact with comfortably.
Use multiple select option when users need to select more than one option.
Don't force users to use a single select field when multiple selections are needed.
Validate input and provide clear error messages when the selection is incorrect.
Don't provide generic error messages that don't help users understand the issue.
Keep consistent styling and spacing across all select fields in the application.
Don't use inconsistent styles that may confuse users.
