Select Toggle Button

Select toggle button is a button styled like the trigger of a Select, for building custom dropdown-style pickers. Use it as the trigger element — typically as a PopoverTrigger child — when a picker needs richer trigger content or overlay behavior than Select or Combobox support, while keeping the standard form-control look.

#Example

#Usage

#As a popover trigger

#Accessible label

The button always carries an aria-label — yours with ", press to show options" appended, or "Toggle options menu" when you don't pass one. Because aria-label overrides visible content for screen readers, pass one that matches the visible label.

#Guidelines

#When to use

• When building a custom picker (e.g. a popover with search, grouping, or rich rows) whose trigger should look like a standard Select.
• This should be rare — reach out in #hightouch-ui on Slack before building a custom picker.

#When not to use

• If a standard option list works, use a Select or Combobox — they handle the overlay, keyboard navigation, and selection state.
• For triggers that should look like buttons, use a Button or Menu.

#Props

Also accepts standard button element props.

Name	Default	Description
size	—	"sm" | "md" | "lg"