SelectTrigger
Dropdown-style trigger button used for selects, column menus, and page-size pickers.
Props
| Prop | Type | Default | Description |
|---|---|---|---|
children | ReactNode | — | Trigger label content. |
caret | boolean | true | Show the chevron-down caret. |
size | "sm" | "md" | "md" | Control height. |
open | boolean | — | Visually indicates an owning popover/menu is currently open (border/bg highlight). |
Usage
SelectTrigger is a styled <button> that mirrors the look of a select dropdown. It's the same trigger used internally by Select, and it pairs with DropdownMenu or a custom Popover for the actual dropdown panel. The caret prop controls whether the chevron icon is shown, and open gives the trigger visual highlight state.
Standalone trigger
Open state
Without caret
Small
import { SelectTrigger } from "@solarius/onset";
import type { SelectTriggerProps } from "@solarius/onset";
<SelectTrigger>us-east-1 (N. Virginia)</SelectTrigger>
<SelectTrigger open>With open state</SelectTrigger>
<SelectTrigger caret={false}>No caret</SelectTrigger>
<SelectTrigger size="sm">Small</SelectTrigger>