Select
Select is used to pick a value from a list of options.
Usage
import { Select } from 'stwui';
import Select from 'stwui/select';
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
function handleChange(e: Event) {
console.log(e.target.value);
}
</script>
<Select name="select-1" placeholder="Basic" on:change={handleChange} {options}>
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
</script>
<Select name="select-2" {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
With Leading
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const email = "svg-path";
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
</script>
<Select name="select-3" {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Leading slot="leading" data={email} />
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
You're doing it wrong!
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const email = "svg-path";
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
let value: string | undefined;
let error: string | undefined = "You're doing it wrong!";
$: if (value && value.length > 0) {
error = undefined;
} else {
error = "You're doing it wrong!";
}
</script>
<Select name="select-4" {error} bind:value {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Leading slot="leading" data={email} />
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const email = "svg-path";
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
</script>
<Select name="select-5" disabled {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Leading slot="leading" data={email} />
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
Multi-Select
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const email = "svg-path";
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
},
{
value: 'option_4',
label: 'Option 4'
},
{
value: 'option_5',
label: 'Option 5'
},
{
value: 'option_6',
label: 'Option 6'
}
];
</script>
<Select name="select-4" placeholder="Basic" multiple {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Options slot="options">
{#each multipleOptions as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
</script>
<Select name="select" mobile {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
Multi-Select With Mobile
<script lang="ts">
import { Select } from 'stwui';
import { SelectOption } from 'stwui/types';
const options: SelectOption[] = [
{
value: 'option_1',
label: 'Option 1'
},
{
value: 'option_2',
label: 'Option 2'
},
{
value: 'option_3',
label: 'Option 3'
}
];
</script>
<Select name="select" mobile multiple {options}>
<Select.Label slot="label">Label</Select.Label>
<Select.Options slot="options">
{#each options as option}
<Select.Options.Option {option} />
{/each}
</Select.Options>
</Select>
Select Props
| name | string | nanoid() |
| error | string | undefined | |
| placeholder | string | undefined | |
| value | string | string[] | undefined | |
| multiple | boolean | false |
| visible | boolean | false |
| optionLabel | string | label |
| optionValue | string | value |
| closeOnSelect | boolean | true |
| disabled | boolean | false |
| mobile | boolean | false |
| options | SelectOption[] | |
| on:change | (e: Event) => void | |
| on:input | (e: Event) => void | |
Select Slots
| label | <Select.Label slot="label" /> |
| leading | <Select.Leading slot="leading" /> |
| options | <Select.Options slot="options" /> |
Select.Leading Props
| data | string (IconData) | |
| viewBox | string | 0 0 24 24 |
| size | string | 24px |
| width | string | 24px |
| height | string | 24px |
| color | string | currentColor |
| stroke | string | undefined | |
| fill | string | currentColor |
Select.Options.Option Props
Select Class Identifiers
| stwui-select |
| stwui-select-display |
| stwui-select-leading-wrapper |
| stwui-select-error-icon |
| stwui-select-drop-icon |
| stwui-select-error |
| stwui-select-label |
| stwui-select-options |
| stwui-select-option |
