> For the complete documentation index, see [llms.txt](https://voit.gitbook.io/voitdocs/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://voit.gitbook.io/voitdocs/components/select.md).
# Select
Select components allow users to choose an option from a dropdown list. They are commonly used in forms to present a list of predefined options, providing a user-friendly way to input data.
## Overview
The Select component simplifies data input by offering a compact dropdown list of predefined options, reducing the space needed for multiple choices.
{% embed url="" %}
## When to use
* Use Select when the user must choose from a predefined list of options that don’t exceed a manageable number.
* In forms where space is a concern, Select allows compact input fields.
* Select is ideal when users may pick one or multiple items from a dropdown, especially when there's a need for preselection.
* Use Select components in forms or workflows where users must select a required value to continue, guiding them toward the necessary input.
## When not to use
* Avoid using a Select component if users are deciding between just two choices. Radio buttons or toggles may be better suited.
* Important actions, like submitting forms or performing key tasks, should not be hidden in a dropdown as it could hinder discoverability.
* If all options need to be visible simultaneously, a Select component might not be ideal. Consider using a list or button group.
* Since select dropdowns require an extra click, use buttons or radio options if fast, direct interaction is necessary.
## Anatomy
1. **Label:** Text element that identifies the purpose of the Select dropdown.
2. **Subtitle:** Secondary text by the label, providing additional context or clarification.
3. **Support:** A note that clarifies any restrictions or instructions.
4. **Hint:** Helps guide the user on the expected selection.
5. **Count (on the label):** Displays the number of selected items or available options.
6. **Icon Leading:** Optional icon placed on the left, often indicating the nature of the content.
7. **Tag:** Visual indicator used when multiple selections are made, showing the selected items.
8. **Placeholder or Preselected Option:** The default option or placeholder text shown before the user makes a selection, indicating what action is needed.
9. **Icon Trailing:** The dropdown arrow or another visual indicator on the right side of the Select component, signaling that the menu can be expanded.
10. **Menu Options:** The list of selectable items within the dropdown.
## Styles
## States
## Size
| Size | Text (px) | Icon (px) | Corner (px) | Container Height (px) |
| ------ | --------- | --------- | ----------- | --------------------- |
| Small | 14 | 20 | 8 | 32 |
| Medium | 14 | 20 | 8 | 42 |
| Large | 16 | 24 | 8 | 50 |
## Accessibility
* **Keyboard Navigation:** Ensure users can open, navigate, and select from the dropdown using only the keyboard. Focus states should be clearly visible for each option.
* **Screen Reader Compatibility:** All label, count, and option information should be conveyed effectively to screen readers. The selected state must be communicated clearly.
* **Accessible Instructions:** Include clear instructions in the form label or support text so users with cognitive or visual impairments understand the purpose and function of the dropdown.
* **Consistent Styling:** Select components should maintain a uniform style throughout the interface to avoid confusion, and alternate states (disabled, focus) should be evident.
## Example
* **Country Selector in Registration Forms:** Use Select to allow users to choose a country when signing up or filling out a profile.
* **Payment Method Selection:** For checkout pages, present payment options like credit cards, PayPal, or other methods in a dropdown list.
* **Filtering Items on E-commerce Sites:** Use Select dropdowns to help users filter results by categories like price range, brand, or ratings.
* **Choosing File Types for Export:** Allow users to pick an export format (PDF, CSV, XLS) when downloading data or files.
* **Language Preference on Websites:** Dropdowns can let users pick their preferred language when visiting a site or using an app with multilingual support.
