intro

Select

A foundational dropdown selection atom styled with Curva & Concreto principles.

Select

The Select component provides a native HTML dropdown menu styled to match the TextInput atom. It is preferred over complex JS-based custom selects for standard data entry due to its superior native accessibility and smaller bundle size.

Standard Select Choose a state

Invalid State Please select a valid option.

Valid State State selected successfully!

Usage

Like TextInput, Select is designed to be wrapped by a FormField component.

<script>
  import { FormField, Select } from 'cobogo';

  const options = [
    { value: 'pf', label: 'Pessoa Física (CPF)' },
    { value: 'pj', label: 'Pessoa Jurídica (CNPJ)' }
  ];
  let documentType = $state('');
</script>

<FormField label="Document Type" htmlFor="doc-type-select">
  {#snippet children(props)}
    <Select {options} bind:value={documentType} placeholder="Select type..." {...props} />
  {/snippet}
</FormField>

Validation States

Validation states use the exact same color mapping as TextInput: --vermelho-soft/--vermelho for errors, and --verde-soft/--verde for success. The custom chevron icon is also automatically tinted to match the current validation state.

Props

Prop	Type	Default	Description
`value`	`string`	`''`	The bindable value of the selected option.
`options`	`Array<{value: string, label: string}>`	`[]`	The array of available options.
`placeholder`	`string`	`undefined`	The default unselectable placeholder option text.
`disabled`	`boolean`	`false`	Whether the select is disabled.
`invalid`	`boolean`	`false`	Whether the select is in an invalid state.
`valid`	`boolean`	`false`	Whether the select is in a valid state.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size variant of the select.