Select

A dropdown selector for choosing one option from a list. The trigger looks like an input field with a trailing chevron. The dropdown panel uses paper background, shadow-md, and 14px radius. Selected items get a teal checkmark. Used for currency, category, and payer selection in the expense form.

Variants

No selection (placeholder)

Value selected

Expanded dropdown

The trigger is styled to match the text input — same height (44px), same border, same font. It's clearly a selector because of the trailing chevron, not a free-text field.

The dropdown panel anchors directly below the trigger with a 4px gap. It uses --shadow-md for elevation and border-radius: var(--r-md) (14px). Options are 40px tall — large enough for confident tapping on mobile.

The selected option shows a teal checkmark (✓) aligned to the right. Only one option can be selected at a time.

Sizes

₹ INR

₹ INR — Indian rupee

Size	Height	Font	Use case
Small	36px	13px	Inline selectors in compact forms
Default	44px	15px	Standard — category, currency, payer in expense form
Large	52px	17px	Prominent selectors in onboarding or settings screens

States

Default

Select…

Focused / open

🍜 Food & drink

Disabled

₹ INR

State	Trigger	Chevron	Transition
Default	`--ink-line` border	Pointing down	—
Hover	`--ink-body` border	Pointing down	140ms ease-out
Focused / open	`--teal` border + glow	Rotated 180°	140ms ease-out
Disabled	40% opacity	Pointing down	—

On dark surfaces

Select a category

🍜 Food & drink

Anatomy

🍜 Food & drink

Trigger (14px radius, input-like)

Chevron

🍜 Food & drink

✈︎ Travel

Panel (14px radius, shadow-md)

Selected option (teal, check visible)

Part	Element	Notes
Trigger	`div.select-trigger[role="combobox"]`	44px height, 14px radius. `aria-expanded` synced to open/closed state.
Label	`span.select-trigger__label`	Flex-grows to fill. Placeholder uses muted color.
Chevron	SVG `.select-trigger__chevron`	Rotates 180° when open. 16px.
Panel	`div.select-panel[role="listbox"]`	Positioned below trigger, 4px gap. 14px radius, shadow-md.
Option	`div.select-option[role="option"]`	40px height. Add `.select-option--selected` for active item.
Check	SVG `.select-option__check`	Hidden by default, visible on selected option. Teal color.
Group label	`div.select-group-label`	Optional divider with mono text heading.
Separator	`div.select-separator`	1px warm line between groups.

Usage

Do Use select when there are 6+ options that don't benefit from always being visible. Use group labels and separators when options have natural categories (e.g. food / travel / other). Always pre-select the most common option.

Don't Don't use a select for fewer than 6 options — use a radio group. Don't use it for boolean choices — use a toggle. Don't put more than 15 items in a dropdown without a search filter.

Do Close the dropdown when an option is selected, when the user clicks outside, or when Escape is pressed. On mobile, consider opening a native picker or a bottom sheet instead.

Don't Don't use a native <select> element — it can't be styled to match Settld's design. Don't position the panel so it clips off-screen — flip it above the trigger when there's no room below.

Accessibility

ARIA Trigger: role="combobox", aria-haspopup="listbox", aria-expanded="true|false". Panel: role="listbox". Options: role="option", aria-selected="true|false". The trigger's aria-label should describe what's being selected ("Category", "Currency").

Keyboard Enter or Space opens the dropdown. Arrow keys navigate options. Enter selects the focused option. Escape closes without changing selection. Tab closes and moves focus forward.

Code

HTML

<!-- Trigger -->
<div class="select-trigger"
     role="combobox"
     aria-haspopup="listbox"
     aria-expanded="false"
     aria-label="Category"
     tabindex="0">
  <span class="select-trigger__label select-trigger__placeholder">Select a category</span>
  <svg class="select-trigger__chevron" aria-hidden="true" viewBox="0 0 16 16" fill="none">
    <path d="M4 6l4 4 4-4" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
  </svg>
</div>

<!-- Panel -->
<div class="select-panel" role="listbox" aria-label="Category">
  <div class="select-group-label">Common</div>
  <div class="select-option select-option--selected" role="option" aria-selected="true">
    🍜 Food & drink
    <svg class="select-option__check" aria-hidden="true" viewBox="0 0 16 16" fill="none">
      <path d="M3 8l3.5 3.5 6.5-7" stroke="currentColor" stroke-width="1.5" stroke-linecap="round"/>
    </svg>
  </div>
  <!-- More options -->
</div>

CSS classes

Class	Purpose
`.select-trigger`	Input-like trigger button with chevron
`.select-trigger__label`	Selected value text (flex-grows)
`.select-trigger__placeholder`	Muted placeholder text style
`.select-trigger__chevron`	Trailing arrow SVG — rotates on open
`.select-panel`	Dropdown container — paper bg, shadow-md, 14px radius
`.select-option`	40px item row
`.select-option--selected`	Teal text + visible check
`.select-option__check`	Checkmark SVG — hidden until selected
`.select-group-label`	Mono uppercase group header
`.select-separator`	1px warm divider between groups