Skip to content
CodeAtlas UI

Inputs

Select

Dropdown selector with keyboard navigation, a label, hint and error state.

<script>
  import { Select } from "@codeatlasdev/ui";
  let value = $state("br");
</script>

<Select label="Country" options={[{ value: "br", label: "Brazil" }]} bind:value />

For long lists that need filtering, use Combobox. Without a label the trigger is named by its placeholder. Arrow keys, Enter and Space open the list from the trigger, and Escape closes it. There is no name prop, so a Select does not submit with a native form: read value instead. required blocks native form submission while nothing is selected. Text inside inputs stays at 16px or more on touch screens, so iOS Safari never zooms on focus.

Basic

Controlled select with a pre-selected value.

Selected: svelte

Code
svelte 
<script lang="ts">
  import { Select } from '@codeatlasdev/ui';

  let framework = $state('svelte');

  const frameworks = [
    { value: 'svelte', label: 'Svelte 5' },
    { value: 'react', label: 'React 19' },
    { value: 'vue', label: 'Vue 3' },
    { value: 'solid', label: 'SolidJS' },
    { value: 'astro', label: 'Astro' },
  ];
</script>

<div class="col">
  <Select label="Framework" options={frameworks} bind:value={framework} />
  <p class="out">Selected: <strong>{framework}</strong></p>
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-3);
    width: 100%;
    max-width: 320px;
  }

  .out {
    margin: 0;
    font-size: var(--ca-font-size-body2);
    color: var(--ca-text-secondary);
  }

  .out strong {
    color: var(--ca-brand-text);
    font-family: var(--ca-font-mono);
  }
</style>

Placeholder

No initial value: the placeholder shows until the user picks an option.

Code
svelte 
<script lang="ts">
  import { Select } from '@codeatlasdev/ui';

  let country = $state('');

  const countries = [
    { value: 'br', label: 'Brazil' },
    { value: 'us', label: 'United States' },
    { value: 'de', label: 'Germany' },
    { value: 'jp', label: 'Japan' },
    { value: 'au', label: 'Australia' },
  ];
</script>

<div class="col">
  <Select label="Country" placeholder="Choose a country…" options={countries} bind:value={country} />
</div>

<style>
  .col {
    width: 100%;
    max-width: 320px;
  }
</style>

Empty-value option

An option with value '' (such as 'All projects') is a real selection: the trigger shows its label, not the placeholder. Use it for filters instead of a sentinel value.

Filter value: ""

Code
svelte 
<script lang="ts">
  import { Select } from '@codeatlasdev/ui';

  let project = $state('');

  const projects = [
    { value: '', label: 'All projects' },
    { value: 'web', label: 'Web app' },
    { value: 'api', label: 'API' },
    { value: 'docs', label: 'Docs' },
  ];
</script>

<div class="col">
  <Select label="Project" placeholder="Choose a project…" options={projects} bind:value={project} />
  <p class="out">Filter value: <code>{JSON.stringify(project)}</code></p>
</div>

<style>
  .col {
    width: 100%;
    max-width: 320px;
  }
  .out {
    margin: var(--ca-space-2) 0 0;
    font-size: var(--ca-font-size-caption);
    color: var(--ca-text-secondary);
  }
</style>

States

Disabled options, description, error and a disabled select.

Enterprise is disabled.

Code
svelte 
<script lang="ts">
  import { Select } from '@codeatlasdev/ui';

  let size = $state('md');
  let plan = $state('free');

  const sizes = [
    { value: 'sm', label: 'Small' },
    { value: 'md', label: 'Medium' },
    { value: 'lg', label: 'Large' },
  ];

  const plans = [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise', disabled: true },
  ];
</script>

<div class="col">
  <Select label="Plan" description="Enterprise is disabled." options={plans} bind:value={plan} />
  <Select label="Region" options={sizes} error="Pick a region to continue." />
  <Select label="Size" options={sizes} bind:value={size} disabled />
</div>

<style>
  .col {
    display: flex;
    flex-direction: column;
    gap: var(--ca-space-4);
    width: 100%;
    max-width: 320px;
  }
</style>

Props

PropTypeDefaultDescription
valuestring–Bindable selected value. `undefined` means no selection and shows the placeholder; `""` is a valid value when an option declares it.
optionsArray<{ value: string; label: string; disabled?: boolean }>–Option items.
placeholderstring'Select…' (localized)Text shown when `value` is `undefined` or matches no option. The default comes from the active i18n catalog.
labelstring–Visible label above the trigger.
descriptionstring–Hint shown below the trigger.
errorstring–Error message. Puts the select in the error state.
requiredbooleanfalseMarks the field as required.
disabledbooleanfalseDisables the entire select.
size'sm' | 'md''md'Trigger height.
classstring–Extra classes on the root.
onchange(value: string) => void–Called when the selection changes.