Welcome Pages
Pages are now available as full-screen example templates that showcase real-world use cases and best practices for composing interfaces with the aFP Design System.
Dark Light
System Default LBBW Jira Confluence Source Code
Share Playground

Select

<afp-select> Since 1.0.0 stable This component uses the light DOM, so its markup and styles are part of the regular document flow.

A select component that allows users to choose one or more options from a dropdown list.

Option 1 Option 2

Examples #

Shape #

Use the shape attribute to change a select's shape.

Option 1 Option 2 Option 1 Option 2 Option 1 Option 2 Option 1 Option 2

Sizes #

Use the size attribute to change a select's size.

Option 1 Option 2 Option 1 Option 2 Option 1 Option 2

Label #

Use the label attribute or slot to set the Select's label.

Select your favorite fruit Apple Banana Cherry Mango

Tooltip #

Use the tooltip attribute to show the label's text as a tooltip when hovering on the label.

Light Dark
System

Hint #

Use the hint attribute to provide additional information about the select.

Every 30 seconds Every 1 minute Every 5 minutes

Placeholder #

Use the placeholder attribute to set a placeholder text for the select.

United States Canada Mexico United Kingdom France Germany

Use the search attribute to enable a search field to quickly filter the options by text.

United States Canada Mexico United Kingdom France Germany

Value #

The value attribute can be used to set the initial selected value of the select.

en English de Deutsch fr Français es Español

Clearable #

Use the clearable attribute to add a clear button to the select.

Draft In Review Approved Archived

Multiple #

Use the multiple and maxVisible attributes to allow multiple selections in the select.

John Doe Michael Carter Daniel Rivera Emily Stone

Disabled #

Use the disabled attribute to disable the select.

Development Staging Production

Invalid #

Use the invalid attribute to indicate the select is in an invalid state.

Viewer Editor Administrator

Customization #

Use the --afp-select-max-height CSS variable to set a custom maximum height for the dropdown.

Classic Coffees

Espresso Latte Cappuccino Black Coffee

Specialty & Iced Coffees

Americano Flat White Macchiato Mocha Cold Brew Iced Latte Ristretto Cortado Affogato

Notes #

The Select component is built on top of the Popover component and therefore inherits many of its configuration options.
This includes properties like placement, offset, strategy, and duration, which control how and where the dropdown appears, how far it’s positioned from its trigger, the positioning strategy (absolute or fixed), and the transition timing for showing or hiding it.

For a detailed explanation of these options, see the Popover documentation.

Properties

Learn more about properties.

Name Description Reflects
name
The name attribute to use for the underlying select input element.
Type string
value
The current value of the select. Can be a string or an array of strings for multiple select.
Type string | string[] | null
Default null
placeholder
Placeholder text displayed when no option is selected.
Type string
multiple
Indicates whether multiple options can be selected.
Type boolean
Default false
open
Indicates whether the select dropdown is open.
Type boolean
Default false
invalid
Validation footer property of select
Type string
hint
Hint footer property of select
Type string
clearable
Indicates whether the select can be cleared.
Type boolean
Default false
maxVisible
maxvisible
Maximum number of selected items shown in trigger (only for multiple). If null → unlimited.
Type number
Default 3
tooltip
show label tooltip by hover
Type boolean
label
label header property of select
Type string
size
The size of the select component.
Type
AfpSize
Name Description
SMALL
Small size with compact dimensions.
MEDIUM
Medium size with standard dimensions.
LARGE
Large size with expanded dimensions.
AfpSize
Default AfpSize.MEDIUM
shape
The shape of the select component.
Type
AfpShape
Name Description
PILL
Makes the component circular.
ROUNDED
Makes the component rounded.
SOFT
Makes the component have soft edges.
SQUARE
Makes the component square.
AfpShape
Default AfpShape.ROUNDED
disabled
Indicates whether the select is disabled.
Type boolean
Default false
strategy
The positioning strategy to use for the popover.
Type
AfpStrategy
Name Description
ABSOLUTE
Positioning using absolute positioning.
FIXED
Positioning using fixed positioning.
AfpStrategy
Default AfpStrategy.ABSOLUTE
offset
The offset for the popover positioning.
Type
AfpOffset
Name Description
mainAxis
type: number
crossAxis
type: number
alignmentAxis
type: number | null
AfpOffset
Default { mainAxis: 4, crossAxis: 0, alignmentAxis: 0 }
duration
The duration of the popover show/hide animation in milliseconds.
Type number
Default 150
hideLabel
hidelabel
hides the label visually
Type boolean
placement
The placement preferences for the popover.
Type
AfpPlacement
Name Description
TOP
Top placement.
RIGHT
Right placement.
BOTTOM
Bottom placement.
LEFT
Left placement.
TOP_START
Top-start placement.
TOP_END
Top-end placement.
RIGHT_START
Right-start placement.
RIGHT_END
Right-end placement.
BOTTOM_START
Bottom-start placement.
BOTTOM_END
Bottom-end placement.
LEFT_START
Left-start placement.
LEFT_END
Left-end placement.
AfpPlacement
Default [AfpPlacement.BOTTOM, AfpPlacement.TOP]
search
enables an input field to search fot options
Type boolean

Methods

Learn more about using methods.

Name Description Arguments
show
Shows the select dropdown.
fromKeyboard<boolean> — Indicates if the action was triggered by keyboard.
hide
Hides the select dropdown.
-

Events

Learn more about events.

Name Return Description
afp-value-changed string | string[] | null
Emitted when the value of the select changes.
afp-select string | string[] | null
Emitted when an option is selected.
afp-clear void
Emitted when the select value is cleared.
afp-show void
Emitted when the dropdown is shown.
afp-hide void
Emitted when the dropdown is hidden.
afp-after-show void
Emitted after the dropdown has been shown.
afp-after-hide void
Emitted after the dropdown has been hidden.

Slots

Learn more about slots.

Name Description
default
The default slot for the select options (afp-option elements).
label
The slot for the label content.
content-prefix
The slot for content to appear before the selected value(s) in the trigger.
content-suffix
The slot for content to appear after the selected value(s) in the trigger.
actions
The slot for additional action elements in the trigger.
dropdown-caret
The slot for a custom dropdown caret icon.
clear-icon
The slot for a custom clear icon.

Internationalization

Learn more about internationalization.

Key Description
select.clear-button.aria-label
The default `aria-label` text for the clear button
select.search-field.placeholder
The default placeholder text for the search field
search-field.aria-label
The default `aria-label` text for the search field

CSS Parts

Learn more about CSS Parts.

Name Description Selector
wrapper
The component's outer wrapper.
::part(wrapper)
label-base
The label wrapper.
::part(label-base)
label
The label element.
::part(label)
popover
The popover element.
::part(popover)
panel
The dropdown panel.
::part(panel)
trigger
The trigger element.
::part(trigger)
content
The trigger content container.
::part(content)
actions
The trigger actions container.
::part(actions)
clear-button
The clear button.
::part(clear-button)
clear-icon
The clear button icon.
::part(clear-icon)
dropdown-caret
The dropdown caret icon.
::part(dropdown-caret)
invalid-base
The invalid message wrapper.
::part(invalid-base)
invalid
The invalid message text.
::part(invalid)
hint-base
The hint message wrapper.
::part(hint-base)
hint
The hint message text.
::part(hint)
search-icon
The search icon in the search field.
::part(search-icon)
afp-select-search-input
The search input field.
::part(afp-select-search-input)
placeholder
The placeholder text in the trigger when no option is selected.
::part(placeholder)
placeholder-multiple
The placeholder text in the trigger when no option is selected in multiple select mode.
::part(placeholder-multiple)

CSS Custom Properties

Name Description Default
--afp-select-max-height
The maximum height of the select dropdown panel.
10rem
--afp-select-scale
The scale factor for the select component.
0.97
--afp-input-error-border-color
The border color of the select trigger in the invalid/error state.
--afp-color-error-border-quiet
--afp-select-multiple-padding
The padding of the trigger when multiple options are selected.
0 var(--afp-space-m) 0 var(--afp-space-2xs)
--afp-select-content-prefix-padding
The padding for the content prefix slot in the trigger.
0
--afp-select-content-suffix-padding
The padding for the content suffix slot in the trigger.
0

Dependencies

The component automatically brings in the listed items, including any nested dependencies that may exist.

afp-popover afp-option afp-button afp-icon afp-input

Importing

Using the bundle is the recommended method to include components. If you’d rather handle imports manually, you can use the code examples below.

import '@afp-design-system/core/dist/components/select/select.js';
Select
Share
Create a link with a predefined theme that is automatically applied when the generated link is opened. Default LBBW Presentation Mode
Abort Copy Link