🚧 Under Construction

This component documentation is currently being developed. Some features may be incomplete.

Person Select Dropdown

HTML Markup

<ul class="hoo-select-dropdown hoo-show">
    <li class="hoo-optgroup">
        <div class="hoo-optgroup-name">Team Alpha</div>
        <ul class="hoo-optgroup-items">
            <li data-value="john_doe" class="hoo-option " aria-disabled="false">John Doe</li>
            <li data-value="jane_smith" class="hoo-option " aria-disabled="false">Jane Smith</li>
            <li data-value="alex_johnson" class="hoo-option " aria-disabled="false">Alex Johnson</li>
        </ul>
    </li>
    <li class="hoo-optgroup">
        <div class="hoo-optgroup-name">Team Beta</div>
        <ul class="hoo-optgroup-items">
            <li data-value="sarah_wilson" class="hoo-option " aria-disabled="false">Sarah Wilson</li>
            <li data-value="mike_brown" class="hoo-option hoo-disabled" aria-disabled="true">Mike Brown</li>
            <li data-value="lisa_garcia" class="hoo-option " aria-disabled="false">Lisa Garcia</li>
        </ul>
    </li>
    <li data-value="guest_user" class="hoo-option " aria-disabled="false">Guest User</li>
</ul>

A specialized dropdown component designed specifically for selecting people, featuring avatars and user information.

Overview

The person select dropdown extends the custom select dropdown with visual elements tailored for person selection. It includes avatars, names, and potentially additional user information like roles or departments.

Usage

Person select dropdowns should be used when:

Users need to select a person from a list
Visual identification through avatars is helpful
Additional person information assists in selection
The dropdown is part of assignment, mention, or people-focused functionality

States

Default - Normal closed state
Open - When the dropdown menu is expanded
Focus - When the component has keyboard focus
Disabled - When the dropdown cannot be interacted with

SCSS

Component Import

SCSS Partial Location

CSS Classes

.hoo-select-dropdown - Base container for the dropdown
.hoo-select-dropdown-person - Modifier for person selection styling
.hoo-select-dropdown-button - The button that triggers the dropdown
.hoo-select-dropdown-text - The selected option text
.hoo-select-dropdown-icon - The dropdown indicator icon
.hoo-select-dropdown-menu - The dropdown menu container
.hoo-select-dropdown-option - Individual option in the dropdown
.hoo-avatar - Avatar component within the option
.hoo-person-info - Container for person text information
.hoo-person-name - Person’s name
.hoo-person-details - Additional person details

Accessibility

Use appropriate ARIA roles and attributes
Ensure keyboard navigation works for all options
Implement proper focus management
Support screen readers with appropriate person information
When disabled, include aria-disabled="true"
Ensure avatars have appropriate alt text or are marked as decorative