Forms

Select

A dropdown picker for choosing a single value from a list. Supports variants, colors, icons, avatars, item descriptions, and grouped options.

Playground

Experiment with different props in real-time.

Variant

Color

Size

Basic Usage

Import and use the Select component with an items array and bind:value.

<script lang="ts">
  import { Select } from 'sv5ui';

  let value = $state('');

  const countries = [
    { value: 'us', label: 'United States' },
    { value: 'ca', label: 'Canada' },
    { value: 'mx', label: 'Mexico' },
    { value: 'br', label: 'Brazil' },
    { value: 'ar', label: 'Argentina' }
  ];
</script>

<Select items={countries} bind:value placeholder="Select a country" />

Variants

5 visual styles for different contexts and levels of emphasis.

<Select items={frameworks} variant="outline" placeholder="Outline" />
<Select items={frameworks} variant="none" placeholder="None" />
<Select items={frameworks} variant="soft" placeholder="Soft" />
<Select items={frameworks} variant="subtle" placeholder="Subtle" />
<Select items={frameworks} variant="ghost" placeholder="Ghost" />

Sizes

5 sizes from extra small to extra large.

<Select items={frameworks} size="xs" placeholder="Extra Small" />
<Select items={frameworks} size="sm" placeholder="Small" />
<Select items={frameworks} size="md" placeholder="Medium" />
<Select items={frameworks} size="lg" placeholder="Large" />
<Select items={frameworks} size="xl" placeholder="Extra Large" />

Colors

Semantic color schemes to match your design intent.

<Select items={frameworks} color="primary" placeholder="Primary" />
<Select items={frameworks} color="secondary" placeholder="Secondary" />
<Select items={frameworks} color="success" placeholder="Success" />
<Select items={frameworks} color="warning" placeholder="Warning" />
<Select items={frameworks} color="error" placeholder="Error" />
<Select items={frameworks} color="info" placeholder="Info" />

With Icons

Items can display icons using Iconify names. Add a trigger icon with the icon prop.

<script lang="ts">
  const browsers = [
    { value: 'chrome', label: 'Chrome', icon: 'logos:chrome' },
    { value: 'firefox', label: 'Firefox', icon: 'logos:firefox' },
    { value: 'safari', label: 'Safari', icon: 'logos:safari' },
    { value: 'edge', label: 'Edge', icon: 'logos:microsoft-edge' }
  ];
</script>

<Select items={browsers} placeholder="Choose a browser" icon="lucide:globe" />

With Descriptions

Add a description to items for additional context.

<script lang="ts">
  const roles = [
    { value: 'admin', label: 'Admin', description: 'Full access to all resources' },
    { value: 'editor', label: 'Editor', description: 'Can edit and publish content' },
    { value: 'viewer', label: 'Viewer', description: 'Read-only access' }
  ];
</script>

<Select items={roles} placeholder="Assign a role" />

With Groups

Use { type: "label" } and { type: "separator" } items to organize options into groups.

<script lang="ts">
  const items = [
    { type: 'label', label: 'Frontend' },
    { value: 'react', label: 'React' },
    { value: 'vue', label: 'Vue' },
    { value: 'svelte', label: 'Svelte' },
    { type: 'separator' },
    { type: 'label', label: 'Backend' },
    { value: 'node', label: 'Node.js' },
    { value: 'python', label: 'Python' },
    { value: 'go', label: 'Go' }
  ];
</script>

<Select items={items} placeholder="Pick a technology" />

Disabled Items

Individual items can be disabled, or disable the entire select.

<script lang="ts">
  const plans = [
    { value: 'free', label: 'Free' },
    { value: 'pro', label: 'Pro' },
    { value: 'enterprise', label: 'Enterprise', disabled: true }
  ];
</script>

<Select items={plans} placeholder="Select a plan" />
<Select items={plans} placeholder="Disabled select" disabled />

With Avatar

Items can include avatars for user or entity selection.

<script lang="ts">
  const members = [
    { value: 'alice', label: 'Alice Martin', avatar: { src: 'https://i.pravatar.cc/40?u=alice', alt: 'Alice' } },
    { value: 'bob', label: 'Bob Wilson', avatar: { src: 'https://i.pravatar.cc/40?u=bob', alt: 'Bob' } },
    { value: 'carol', label: 'Carol Lee', avatar: { src: 'https://i.pravatar.cc/40?u=carol', alt: 'Carol' } }
  ];
</script>

<Select items={members} placeholder="Assign to member" />

UI Slots

Use the ui prop to override classes on specific internal elements of the Select.

Slot	Description
`root`	Outermost container wrapper
`base`	Trigger button element — controls shape, padding, border
`leading`	Leading content wrapper
`leadingIcon`	Icon before the selected value
`leadingAvatar`	Avatar before the selected value
`leadingAvatarSize`	Avatar size override
`trailing`	Trailing content wrapper
`trailingIcon`	Chevron/trailing icon
`value`	Selected value text
`placeholder`	Placeholder text when empty
`content`	Dropdown content panel — controls background, shadow, border radius
`viewport`	Scrollable viewport inside the dropdown
`group`	Option group wrapper
`groupLabel`	Group label text
`item`	Individual option — controls hover, active, and selected styles
`itemIcon`	Icon inside each option
`itemAvatar`	Avatar inside each option
`itemAvatarSize`	Avatar size inside options
`itemLabel`	Label text inside each option
`itemDescription`	Description text inside each option
`itemIndicator`	Selected checkmark indicator
`separator`	Separator between groups

<Select
  items={countries}
  placeholder="Custom styled"
  ui={{
    base: 'rounded-full shadow-lg',
    content: 'rounded-xl',
    item: 'rounded-lg'
  }}
/>

Snippets

Use snippets to customize the trigger, items, or dropdown content.

Snippet	Args	Description
`leadingSlot`	`-`	Custom content before the selected value
`trailingSlot`	`-`	Custom content after the selected value
`item`	`{ item, selected }`	Custom rendering for each option
`itemLeading`	`{ item, selected }`	Custom leading content for each option
`itemLabel`	`{ item, selected }`	Custom label for each option
`itemTrailing`	`{ item, selected }`	Custom trailing content for each option
`content`	`{ open }`	Custom dropdown content (replaces default list)

Props

Prop	Type	Default	Description
`value`	`string`	`-`	Selected value (bind:value)
`defaultValue`	`string`	`-`	Default value for uncontrolled usage
`open`	`boolean`	`false`	Whether the dropdown is open (bind:open)
`onOpenChange`	`(open: boolean) => void`	`-`	Callback when open state changes
`items`	`SelectItem[]`	`[]`	Array of selectable items
`placeholder`	`string`	`-`	Placeholder text when no value is selected
`variant`	`'none' \| 'outline' \| 'soft' \| 'subtle' \| 'ghost'`	`'outline'`	Visual style of the select trigger
`color`	`Color`	`'primary'`	Color scheme
`size`	`'xs' \| 'sm' \| 'md' \| 'lg' \| 'xl'`	`'md'`	Select dimensions
`highlight`	`boolean`	`false`	Show a colored highlight ring
`icon`	`string`	`-`	Icon displayed in the trigger (Iconify name)
`leadingIcon`	`string`	`-`	Icon before the selected value
`trailingIcon`	`string`	`'lucide:chevron-down'`	Icon after the selected value
`selectedIcon`	`string`	`'lucide:check'`	Checkmark icon for selected item
`loading`	`boolean`	`false`	Show loading spinner
`loadingIcon`	`string`	`icons.loading`	Custom icon for the loading spinner
`avatar`	`AvatarProps`	`-`	Avatar displayed in the trigger
`transition`	`boolean`	`true`	Enable open/close animation
`portal`	`boolean`	`true`	Render dropdown in a portal
`side`	`'top' \| 'right' \| 'bottom' \| 'left'`	`'bottom'`	Dropdown positioning side
`sideOffset`	`number`	`4`	Offset from trigger element
`align`	`'start' \| 'center' \| 'end'`	`'start'`	Dropdown alignment
`alignOffset`	`number`	`0`	Alignment offset
`loop`	`boolean`	`true`	Enable keyboard navigation looping
`id`	`string`	`-`	HTML id attribute
`name`	`string`	`-`	Form field name for native form submission
`required`	`boolean`	`false`	Mark as required for form validation
`disabled`	`boolean`	`false`	Disable the select
`class`	`string`	`-`	Additional CSS classes
`ui`	`Record<Slot, Class>`	`-`	Override slot classes

Item Props

Each item in the items array accepts these properties. You can also pass { type: "separator" } or { type: "label", label: "Group" } for group dividers.

Prop	Type	Default	Description
`value`	`string`	`-`	Unique value for the item
`label`	`string`	`-`	Display text (falls back to value)
`description`	`string`	`-`	Secondary description text
`icon`	`string`	`-`	Icon displayed before the label (Iconify name)
`avatar`	`AvatarProps`	`-`	Avatar displayed before the label
`disabled`	`boolean`	`false`	Disable this item

RadioGroup Slider