Quick Select Field
Quick Select components are used to provide users with a fast way to choose from a list of predefined options.
Last updated
Quick Select components are used to provide users with a fast way to choose from a list of predefined options.
Last updated
Quick Select components are ideal for scenarios where users need to choose an option swiftly from a list, such as in navigation menus, settings, or any interface requiring quick access to options. This component can be styled as a button, icon, link, or a combination, depending on the context and design needs.
A Quick Select component includes a visible trigger (such as a button, icon, or link) that opens a dropdown list of options when clicked. Users select an option from the list, and the component updates to reflect the chosen item. Optional elements like leading icons, labels, or titles can be added to provide further context or functionality, enhancing the user experience.
aria_label
An optional aria-label for better accessibility, providing a label for screen readers.
string
button_id
The unique ID of the dropdown button, used for accessibility and form submission purposes.
string
component_mode
A custom mode for the component that allows for further customization or style variations.
string
custom_class
An optional custom class to apply additional styling to the dropdown component.
string
disabled
Disables the dropdown, preventing the user from interacting
boolean
error
Displays an error message below the dropdown when provided. Used for validation or feedback.
string
helper_text
Additional information or a hint that appears below the dropdown to assist the user.
string
icon_mode
When true, it activates an icon-based mode where the dropdown options are visually represented by icons instead of text.
boolean
label
The label displayed above the dropdown, indicating the purpose of the field.
string
options
A JSON string representing an array of options to display in the dropdown. The string is parsed into an array.
string
selected
The currently selected option from the dropdown. If no option is selected, it can be an empty string.
string
size
Defines the size of the dropdown, allowing it to be either small or medium.
"medium" | "small"
type
Defines the background style for the dropdown, either transparent or white.
"bg-transparent" | "bg-white"
arrow_button_name
Name attribute for the dropdown arrow icon
string
dropdown_menu_button
Name attribute for the dropdown selections
string
Label: Provides a title or description for the dropdown, helping users understand the purpose of the selection.
Lead-Icon: Positioned before the dropdown text, visually indicating the context or category of the options within the dropdown.
Placeholder: Displays default or prompt text within the dropdown, guiding users on what to select.
Dropdown Icon: Positioned at the right of the dropdown, indicating that there are additional options available.
Use Quick Select components for fast access to a list of options.
Don't use Quick Select components for complex forms or multi-step processes.
Label the Quick Select component clearly to indicate its purpose.
Avoid using ambiguous or unclear labels for Quick Select components.
Ensure the trigger element is large enough to be easily tappable or clickable.
Don't make the trigger element too small to interact with comfortably.
Provide clear visual feedback when an option is selected.
Don't leave users guessing whether their selection was successful.
Use consistent styling and spacing across all Quick Select components in the application.
Don't use inconsistent styles that may confuse users.
Validate input and provide clear error messages when necessary.
Don't provide generic error messages that don't help users understand the issue.
Include appropriate aria-labels for accessibility.
Don't neglect accessibility requirements such as focus states and keyboard navigation.
Ensure each Quick Select component has sufficient contrast against its background.
Avoid using low contrast that can make the component difficult to see.
