Select
A select lets me choose one out of many options from a pop-up list.
The Select component allows users to choose one option from a list in a modal dialog. The full list of options is only visible once a user interacts with the select.
Details
- Extends: USWDS Select component
- Honeycrisp: Form element atom
- Customization: Styles
- Modifier:
.cfa-select
The Select extends the USWDS Select component. Further customization is applied using the CSS modifier(s) .cfa-select
to add styles defined in a custom stylesheet.
Modifier. A modifier is a class name that applies a variant, type, or extended style customization to modify the component's visual appearance.
Examples
Guidance
Form groups. Form questions with select components always use the form group component to wrap the select with a visible label
element.
Refer to additional guidance on the USWDS documentation site.
USWDS documentation siteAdditional references
Accessibility
Refer to additional accessibility guidance on the USWDS documentation site.
Checklist Key
Design library component
Source and usage
- Sass stylesheet:
./_cfa-select.scss
- Thymeleaf template fragment:
./cfa-select.th.html
- Embedded Ruby (ERB) partial template:
./_cfa-select.html.erb