Select

Playground

Um preset por valor do primeiro eixo do Figma. Mude as props; dsState força hover, foco ou pressionado, como na matriz.

Select Trigger

size

className

dsState

data-ds-state

string

Cada célula é o componente real, marcada com a variante do Figma que reproduz (passe o mouse pra ver o node).

Default	Hover	Open	Focus	Disabled	Error

Default	Hover	Open	Focus	Disabled	Error

As props que o arquivo do DS declara. O componente também repassa as do primitivo (base-ui), quando ele tem um.

SelectTriggerProps

Prop	Tipo	Padrão	Descrição
size?	"48" \| "default"	"48"	Figma Size: 48 (phone forms) or Default (32, compact settings and backoffice).
placeholder?	ReactNode	—	Shown while nothing is picked; never a substitute for a label.
invalid?	boolean	—	Error look + `aria-invalid` (Figma `State=Error`). Inside a Form Field, pass `error` there instead.
className?	string	—

SelectContentProps

Prop	Tipo	Padrão	Descrição
container?	HTMLElement \| React.RefObject<HTMLElement \| ShadowRoot \| null> \| ShadowRoot \| null	—	Where the popup is portalled (a dialog keeps it inside itself).
side?	Side	"bottom"
align?	Align	"start"
className?	string	—
children?	ReactNode	—

SelectItemProps

Prop	Tipo	Padrão	Descrição
children	ReactNode	—	The option label (Figma "Label").
className?	string	—