Select

A wrapper component arround native HTML select.

View source
<script lang="ts">
    import { Select } from 'svxui';

    const options = ['option1', 'option2', 'option3', 'option4', 'option5']
</script>

<Select {options} />

API Reference

PropertyTypeDefaultDescription
color
string | number | symbol
"neutral"Select color
elementRef $bindable
HTMLSelectElement
Rendered DOM element
fullWidth
boolean
falseSelect full size
options required
SelectOption[] | string[] | number[]
"[]"Select options
radius
union
Select radius
resolveLabel
SelectOptionResolver
Resolve label fron SelectOption object
resolveValue
SelectOptionResolver
Resolve value of option
selectSize
number | null
"4"Native html size
size
union
"2"Select size

Type Definitions

export type SelectOption = {
    label: string | number;
    value: string | number;
    disabled?: boolean | undefined;
};

export type SelectOptionResolver = <T>(item: T) => string | number;

Examples

Colors

Sizes

Sizes + multiple

FullWidth

FullWidth + multiple

Custom options

v0.0.13