Select - Kitchen Sink

Default rendering

Options render as plain labels. The trigger opens a searchable modal with full keyboard navigation.

import { Select } from '@mediayard/agoratopia-ui/components/select';

<Select
	field={my_form.fields.plain_country}
	placeholder="Country"
	{options}
/>

Custom option renderer

An option_renderer snippet customizes both the options list and the selected value. This one uses the library's flag components, with Cyprus preselected.

<Select
	field={my_form.fields.country}
	placeholder="Country"
	{options}
	default_value="CY"
>
	{#snippet option_renderer({ value, label })}
		{@const Flag = flags[value as CountryAlpha2]}
		<Flag width={20} height={20} />
		<span>{label}</span>
	{/snippet}
</Select>

Form submission

Submit the form to trigger validation and log the selected values on the server.