Dropdown

Select inputs are dropdown inputs used when there are multiple options available for a single input field.

Variants

There are a total of 24 input variations to choose from. They are primarily divided into 4 different states (Default, Active, Filled, Disabled, and Error) of inputs.

States	Sub States

Demo

Guidance

• Select are dropdowns used inside form.
• A listbox is always opened when a select is triggered/clicked.
• In multselect listbox, the selection made by the use are reflected as chips. A “...” appends the chips list if the multi selected options do not fit in the select area.
• Labels, Required, Placeholders, Inline messages and Help text guidance same as in Inputs.
• Use Select if the selection options are more than 5. If less than 5 options, consider using a Radio/Checkboxes.

When to use

• Use Select inside forms when the input field requries selection to be made from multiple options.

Consideration

Designer assets

figma

Hey Designers, please find the Figma assets here. If you want permission to access the file, please contact Experience Design CoP.

Developer API

vue

Hey Developers, find out the tech documentation of this compoment on PrimeVue. If you have issue, please contact Development CoP