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.
Overview
Usage
When to use this component?
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.
How it works
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.
Code
<dda-select
options='[{"id":1,"text":"Option 1"},{"id":2,"text":"Option 2"},{"id":3,"text":"Option 3"},{"id":4,"text":"Option 4"},{"id":5,"text":"Option 5"}]'
label="Select an option"
placeholder="Please select..."
selected="0"
disabled="false"
helper_text="Helper or footer text"
error_message=""
validation_id="validationId"
size="default"
custom_class=""
component_mode=""
button_id="button"
aria_label="select"
toggle_button_name="toggle_button"
option_select_button_name="option_button"
></dda-select> Properties
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
placeholder
Text shown inside the select when no option is selected (non-selectable)
string
selected
The currently selected option from the dropdown. This value is displayed on the button as the selected option.
string
disabled
If set to true, the select dropdown will be disabled, preventing user interaction.
boolean
helper_text
Additional text that provides guidance or hints to the user, usually displayed below the select input field.
string
error_message
A message that will be displayed when the error prop is set, typically used to display validation errors.
string
validation_id
size
Specifies the size of the input field (e.g., small, medium, large). This can be used to apply different sizing classes.
string
custom_class
A custom CSS class to be applied to the component for additional styling customization.
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
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
aria_label
Provides an accessible label for screen readers. It helps improve accessibility by describing the button's purpose for users with disabilities.
string
toggle_button_name
Name attribute which toggles the dropdown
string
option_select_button_name
Name attribute for the dropdown option selections
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
Anatomy
Anatomy Options
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.
Dos and Don'ts
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.
Last updated