Quaff

QSelect

Select fields let users choose one or more values from a dropdown. Typing and filtering make longer lists easier to search.

info QSelect API Source
interface QSelectProps extends HTMLAttributes<HTMLDivElement>
dense
?: boolean = false
Makes the select component more compact.
disabled
?: boolean = false
Disables the select, preventing user interaction.
displayValue
?: string = undefined
Custom text to display in the select instead of the selected value.
emitValue
?: boolean = false
Indicates whether to emit the value rather than the entire option object when a value is selected.
error
?: boolean = false
Indicates an error state for the select.
errorMessage
?: string = undefined
Message to display when the select is in an error state.
filled
?: boolean = false
Applies a filled background style to the select.
filterable
?: boolean = false
Filters options by their label while typing. Requires useInput.
hint
?: string = undefined
Helper text displayed below the select.
inputDebounce
?: number = 300
Delay in milliseconds before calling onFilter after input changes.
label
?: string = undefined
Label text for the select field.
multiple
?: boolean = false
Enables multiple selection mode.
noOptionText
?: string = undefined
Text shown when no options are available.
onFilter
?: (value: string, update: QSelectFilterUpdate, abort: () => void) => void | Promise<void> = undefined
Called while typing so options can be filtered or loaded externally. Requires useInput.
options
: QSelectOption[] = undefined
Array of options to display in the select menu. Can be an array of strings or objects with label and value properties. If an object is used, the label will be displayed in the dropdown and the value will be used as the selected value.
outlined
?: boolean = false
Applies an outlined style to the select.
rounded
?: boolean = false
Makes the sides of the select round.
useInput
?: boolean = false
Allows typing into the select field.
value
: QSelectValue = $bindable(undefined)
Current value of the select. Can be a single value or an array of values when multiple is true.

Usage

Basic Usage
QSelect allows users to choose one or multiple options from a dropdown list. It supports various configurations for different UI requirements and validates user input.
Selected value: None
Working with Options
QSelect accepts options as an array of strings or as objects with label and value properties. Using objects allows you to display a friendly label while storing a different value.
String options
Selected: None
Object options
Selected value: None
Emit value

When using object options, use the emitValue prop to return the value property instead of the entire object.

Selected value: None
Input Filtering
Use useInput with filterable to let users search through local options by label.
External Filtering
Use onFilter when the option list is filtered or loaded outside the component.
Multiple Selection
Enable multiple selection with the multiple prop. This allows users to select more than one option from the dropdown menu.
Selected values: None
Custom Display Value
Use the displayValue prop to customize how selected values are displayed in the select input. This is particularly useful for multiple selection.
Selected values: None
Display value: None
Select Styles
QSelect supports different style variants: default, outlined, filled, and rounded. Choose the style that best fits your UI design.
Dense Layout
The dense prop makes the select component more compact, useful for forms with space constraints or for when you need to display multiple selects in a limited space.
Disabled State
Use the disabled prop to prevent user interaction with the select component. Disabled selects maintain their appearance but don't respond to user input.
Validation and Hints
QSelect provides built-in support for validation states and helper text. Use the error prop to indicate validation errors and hint to provide additional guidance to users.
Select your favorite animal
Selection is required
Custom Icons and Content
Enhance your selects with custom content using the prepend, append, before, and after slots. These allow you to add icons or other content around the select field.
info
help
Two-way Binding
QSelect supports Svelte's two-way binding with the bind:value directive. This makes it easy to sync the select's state with your component's variables.
Current selection: None
Dynamic Options
You can dynamically generate options based on data. This is useful when working with options that might change or are loaded from an external source.
Localization
Choose a language, then open the empty select to see its translated message. See all available locales for more languages and setup instructions. noOptionText overrides the message for an individual select.
Responsive Design
QSelect is fully responsive and adapts to its container width. You can use it in various layouts and grid systems.
Accessibility
QSelect is built with accessibility in mind. It supports keyboard navigation, focus states, and appropriate ARIA attributes for screen readers.

Keyboard navigation support:

Tab
Moves focus to the select
Enter/Space
Opens the dropdown or selects the focused option
Arrow keys
Navigate through options
Home/End
Moves to the first or last option
Escape
Closes the dropdown without selecting
Use keyboard to interact with this select
Privacy Policy