The Select component provides a dropdown menu for choosing a single option from a list. It is commonly used in forms, filters, and settings where users need to make a selection without typing.

• Single selection: Only one option can be selected at a time.
• Accessible: Uses native <select> behavior for keyboard and screen reader support.
• Customizable styling: Supports variants and custom CSS classes.
• Disabled state: Can be disabled to prevent user interaction.
• Reactive value binding: Works with reactive state for dynamic updates.

Usage Example

Preview

v2

v1 test v2 test v3 test

disabled

contained

outlined

text

Code

<script lang="ts">
  import { Constants } from "@fefade-ui/core"
  import { Badge, Select } from "@fefade-ui/svelte"

  let currentOption = $state("v2")
</script>

<Badge size="lg">
  <span>{currentOption}</span>
</Badge>

<br />
<br />

<Select
  onchange={(e) => {
    currentOption = e.currentTarget.value
  }}
  value={currentOption}
>
  <option value="v1">v1 test</option>
  <option value="v2">v2 test</option>
  <option value="v3">v3 test</option>
</Select>

<br />
<br />

<Select disabled>
  <Select.Option value="disabled">disabled</Select.Option>
</Select>

<br />
<br />

{#each Constants.variants as variant (variant)}
  <Select {variant}>
    <option>{variant}</option>
  </Select>
  <br />
{/each}

Props

Prop	Type	Default	Description
value	string	—	Current selected value; supports reactive binding.
variant	string	—	Style variant of the select (e.g., outlined, filled).
disabled	boolean	false	Disables the select when true.
class	string	—	Optional CSS classes for custom styling.
style	string	—	Inline styles for layout or visual customization.
onchange	function	—	Callback triggered when the selected value changes.

Best Practices

• Keep option labels short and descriptive.
• Use variants consistently for UI coherence.
• Bind value for reactive updates in forms or dynamic UI.
• Disable the select when input is not relevant or temporarily unavailable.
• Ensure accessible labeling with <label> or aria-label.