Select

Loading...

A select component for choosing one or multiple options from a list.

• Tag: <flint-select>
• Class: FlintSelect

Import

import 'flint-ui'; // auto-registers all
// or
import { FlintSelect } from 'flint-ui';

Usage

<flint-select></flint-select>

Properties

Property	Attribute	Type	Default	Description
label	label	string	''	Label text displayed above the select.
options	options	SelectOption[]	[]	Array of selectable options.
value	value	string[]	[]	Currently selected value(s).
multiple	multiple	boolean	false	Allow multiple selections.
placeholder	placeholder	string	'Select an option'	Placeholder text when no value is selected.
disabled	disabled	boolean	false	Disables the select and prevents interaction.
readonly	readonly	boolean	false	Makes the select read-only.
required	required	boolean	false	Marks the select as required for form validation.
error	error	boolean	false	Whether the select is in an error state.
errorMessage	error-message	string	''	Error message displayed below the select.
name	name	string	''	Form field name used when submitting form data.
size	size	SelectSize	'md'	Size variant of the select.
defaultValue	default-value	string	''	Sets the initial value in uncontrolled mode (single-select only).

Events

Event	Detail	Description
flint-select-change	—	Dispatched when the selection changes. detail: { value: string | null } (single) or { value: string[] } (multiple)

Slots

Name	Description
icon	Optional icon shown at the start of the trigger.
error-message	Optional slot for error message content (use error-message prop for simple text).

CSS Custom Properties

Property	Default
--flint-select-bg	—
--flint-select-border	—
--flint-select-radius	—
--flint-select-focus-color	—
--flint-select-error-color	—
--flint-select-chip-bg	—
--flint-select-chip-color	—
--flint-select-chip-radius	—
--flint-select-option-hover-bg	—
--flint-select-option-selected-bg	—
--flint-select-option-selected-color	—
--flint-input-bg	—
--flint-input-border-color	—
--flint-input-border-radius	—
--flint-primary-color	—
--flint-error-color	—
--flint-hover-color	—
--flint-primary-color-light	—
--flint-text-color-on-primary	—
--flint-font-family	—
--flint-label-color	—
--flint-input-border-hover-color	—
--flint-primary-focus-ring	—
--flint-error-focus-ring	—
--flint-input-disabled-bg	—
--flint-input-readonly-bg	—
--flint-input-placeholder-color	—
--flint-text-color	—
--flint-text-color-muted	—
--flint-shadow-lg	—
--flint-border-color	—

---