CropWatch User Interface

CwDropdown

Keyboard-navigable custom select with ARIA combobox pattern.

<CwDropdown
	options={options}
	label="Fruit"
	placeholder="Choose a fruit…"
	bind:value={selectedFruit}
/>

Documentation Upgrade

Start here

CwDropdown is a custom select/combobox wrapper. Pass the option list, bind the selected value, and let the component handle keyboard navigation and popover positioning.

How to think about it

Build the option list first Each option needs a `label` and `value`. Add `disabled` to any item that should be visible but not selectable.
Bind the selected value Use `bind:value` if the parent owns the selection state. Use `onchange` when you only need a callback.
Treat errors as field-level validation Use the `error` prop when the user must make a selection before continuing.

Props and callbacks

API	Type	Details
`options` Required	`Array<{ label: string; value: string; disabled?: boolean }>`	Items shown in the dropdown list.
`value` Default: `''`	`string`	Selected option value. Bind this when the parent owns state.
`label`	`string`	Visible field label.
`placeholder` Default: `Select...`	`string`	Text shown before a value is selected.
`required` Default: `false`	`boolean`	Marks the hidden native input as required for form validation.
`disabled` Default: `false`	`boolean`	Prevents opening the list or changing the value.
`error`	`string`	Validation message rendered below the field.
`onchange`	`(value: string) => void`	Called when the selected value changes.
`name / autocomplete`	`string`	Optional native form attributes forwarded to the hidden input.

Copy-paste examples

These snippets intentionally show the full public API surface the live demo relies on.

Controlled dropdown

This is the most common usage in forms and filters.

<script lang="ts">
	const fruitOptions = [
		{ label: 'Apple', value: 'apple' },
		{ label: 'Banana', value: 'banana' },
		{ label: 'Dragonfruit', value: 'dragonfruit', disabled: true }
	];
	let selectedFruit = $state('');
</script>

<CwDropdown
	options={fruitOptions}
	label="Fruit"
	placeholder="Choose a fruit..."
	bind:value={selectedFruit}
/>

Form validation and change callback

Use `required` and `error` when the selection is mandatory.

<script lang="ts">
	const siteOptions = [
		{ label: 'North greenhouse', value: 'north' },
		{ label: 'South greenhouse', value: 'south' }
	];
	let site = $state('');
	let error = $state('');

	function handleChange(value: string) {
		site = value;
		error = '';
	}
</script>

<CwDropdown
	options={siteOptions}
	name="site"
	required
	label="Deployment site"
	error={error}
	value={site}
	onchange={handleChange}
/>