Inline Select

Allows the user to choose from a set of options.

Overview / Hero - KL

Anatomy

An inline select always consists of a text label and a trailing icon. As the name suggests, the select can be applied 'inline', meaning as part of a paragraph. Stand-alone appliance is also a possibility. When used inline, the label always has an underline to clearly indicate the interactive part.

Overview / Anatomy - KL

States

The default and hover state are currently similar. A click or tab interaction triggers an animation on the trailing icon, making it rorate 90 degrees clockwise and exposes the (dropdown) menu in order to select the right input.

Overview / States - KL

Types

An Inline Select is, as the name suggests, a variant of a regular Select.
See the Select component for more information.

Overview / Types - KL