Select

A custom dropdown with labels, placeholder, helper text, and validation states. The options property is set via JavaScript as an array of { value, label } objects.

Playground

Controls

Variant

Size

Multiple

Placeholder

Label

Name

Helper Text

Disabled

Required

Labels

Theme

HTMLReact

ShareCopy

Usage

<lt-select id="my-select" label="Country" placeholder="Select a country"></lt-select>

<script type="module">
const select = document.getElementById('my-select');
select.options = [
  { value: 'us', label: 'United States' },
  { value: 'gb', label: 'United Kingdom' },
  { value: 'ca', label: 'Canada' },
];
select.addEventListener('change', (e) => console.log(e.detail.value));
</script>
  
<!-- Multiple selection: value is an array of the selected values -->
<lt-select id="fruit" label="Fruit" multiple></lt-select>

import { Select } from '@latty-ds/react';

const options = [
{ value: 'us', label: 'United States' },
{ value: 'gb', label: 'United Kingdom' },
{ value: 'ca', label: 'Canada' },
];

<Select
label="Country"
placeholder="Select a country"
options={options}
onChange={(e) => console.log(e.detail.value)}
/>
// Multiple selection: value is an array of the selected values
<Select label="Fruit" multiple />

<script setup lang="ts">
const options = [
{ value: 'us', label: 'United States' },
{ value: 'gb', label: 'United Kingdom' },
{ value: 'ca', label: 'Canada' },
]
</script>

<template>
<lt-select
  label="Country"
  placeholder="Select a country"
  :options="options"
  @change="(e) => console.log(e.detail.value)"></lt-select>
</template>

Select vs. Dropdown

Both let the user choose from a list of options, but they are built for different purposes:

	Select	Dropdown
Trigger	A styled form field with a label and helper text	Any slotted element — button, icon, avatar
Options	options prop — array of { value, label }	Fully custom slot content (lt-dropdown-item)
Use when	Form fields — the user is selecting a value that will be submitted or stored	Action menus, context menus, overflow menus — the user is choosing an action, not setting a value
Avoid when	You need custom item layouts, icons per item, or the trigger isn't a form field	You need the selected value to persist or participate in form submission — use Select instead

API