Select

The select component allows to pick an item from a list.

import {(Select, SelectOption)} from "@makigas/genshi-svelte";

<Select
	label="Continent"
	placeholder="Specify your region in order to show the fastest CDNs in your area.">
	<SelectOption value="africa">Africa</SelectOption>
	<SelectOption value="america">America</SelectOption>
	<SelectOption value="asia">Asia</SelectOption>
	<SelectOption value="europe">Europe</SelectOption>
	<SelectOption value="oceania">Oceania</SelectOption>
</Select>

You have picked: america

List

Pass the multiple prop to the Select component to render it as a list.

<Select
	multiple
	rows="3"
	label="Continent"
	placeholder="Specify your region in order to show the fastest CDNs in your area.">
	<SelectOption value="africa">Africa</SelectOption>
	<SelectOption value="america">America</SelectOption>
	<SelectOption value="asia">Asia</SelectOption>
	<SelectOption value="europe">Europe</SelectOption>
	<SelectOption value="oceania">Oceania</SelectOption>
</Select>

You have picked: america, asia

Disabled

Selects can also be disabled with the disabled prop:

Validation

You can add the validation prop to mark the field as valid or invalid with either the "valid" or "invalid" string. Absence of this prop will mark the field as default.

Sizes