Select — Sinapse Design System

Default

Trigger fechado com placeholder. Click ou Enter/Space abre o painel.

<Select
options={[
  { value: "sus", label: "SUS" },
  { value: "amil", label: "Amil" },
  { value: "bradesco", label: "Bradesco Saúde" },
]}
placeholder="Selecione o convênio"
/>

<template>
<select class="itps-input">
  <option disabled selected value="">Selecione o convênio</option>
  <option value="sus">SUS</option>
  <option value="amil">Amil</option>
  <option value="bradesco">Bradesco Saúde</option>
</select>
</template>

<!-- Para combobox custom com keyboard nav, use Reka UI (Vue) / Radix Select (React) e aplique .itps-input ao trigger. -->

<select className="itps-input">
<option disabled value="">Selecione o convênio</option>
<option value="sus">SUS</option>
<option value="amil">Amil</option>
<option value="bradesco">Bradesco Saúde</option>
</select>

{/* Combobox custom: use Radix Select e aplique .itps-input ao trigger. */}

<select class="itps-input">
<option disabled selected value="">Selecione o convênio</option>
<option value="sus">SUS</option>
<option value="amil">Amil</option>
<option value="bradesco">Bradesco Saúde</option>
</select>

<!-- Para combobox Preline, use data-hs-select="{...}" — veja preline.co/docs/select.html -->

Com descrições

Cada opção pode trazer um subtítulo. Útil quando o label sozinho não basta.

<Select
options={[
  { value: "consulta", label: "Consulta", description: "30 min, presencial" },
  { value: "exame", label: "Exame", description: "Lab parceiro" },
  { value: "procedimento", label: "Procedimento", description: "Agenda dedicada" },
]}
placeholder="Tipo de atendimento"
/>

Sizes

Três alturas alinhadas ao token form-height.

<Select size="sm" options={[...]} />
<Select size="md" options={[...]} />
<Select size="lg" options={[...]} />

Estados

<Select value="sus" options={[{ value: "sus", label: "SUS" }]} />
<Select value="amil" options={[{ value: "amil", label: "Amil" }]} disabled />
<Select options={[{ value: "x", label: "X" }]} placeholder="Sem seleção" invalid />

Com Field

Padrão real: envolva no Field para label + erro.

Convênio *

<Field id="conv" label="Convênio" mandatory>
<Select id="conv" name="conv" options={[
  { value: "sus", label: "SUS" },
  { value: "particular", label: "Particular" },
]} placeholder="Selecione" />
</Field>

Acessibilidade

role="combobox" no trigger, role="listbox" no painel, role="option" em cada item
aria-expanded, aria-controls, aria-activedescendant ligados via id
Keyboard: Enter/Space/ArrowDown abre, ↑/↓ navegam, Home/End vão pra extremos, Enter/Space selecionam, Escape fecha
Click fora fecha, foco volta pro trigger

Props

Prop	Tipo	Default	Descrição
`id`	`string`	auto	ID do trigger.
`name`	`string`	—	name HTML do input hidden.
`options`	`Option[]`	obrigatório	Lista de opções.
`value`	`string`	—	Valor selecionado inicial.
`placeholder`	`string`	`'Selecione uma opção'`	Texto quando vazio.
`disabled`	`boolean`	`false`	Bloqueia interação.
`required`	`boolean`	`false`	Marca como obrigatório.
`invalid`	`boolean`	`false`	Borda vermelha.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	Altura.
`leftIcon`	`string`	—	Material Symbol antes.
`class`	`string`	—	Classes adicionais.

Option

Prop	Tipo	Descrição
`value`	`string`	Valor submetido.
`label`	`string`	Texto principal.
`description`	`string`	Subtítulo opcional.