Select

npm package: import it from 'flootlets'

bun add flootlets

Or copy it in with the shadcn CLI: import it from '@/components/ui/…'

npx shadcn@latest add https://dyeoh.github.io/flootlets/r/select.json

Both need Tailwind CSS v4; see Installation for the setup.

SmallMediumLargeExtra large (sold out)

SizeChoose a size

Selected: nothing yet

import { createSignal } from 'solid-js';
const sizes = [
  { value: 's', label: 'Small' },
  { value: 'm', label: 'Medium' },
  { value: 'l', label: 'Large' },
  { value: 'xl', label: 'Extra large (sold out)', disabled: true },
];

export default function SelectExample() {
  const [size, setSize] = createSignal<string>();
  return (
    <Stack gap={2} class="w-full max-w-72">
      <Select
        label="Size"
        options={sizes}
        value={size()}
        onChange={setSize}
        placeholder="Choose a size"
      />
      <span>Selected: {size() ?? 'nothing yet'}</span>
    </Stack>
  );
}

Built on Kobalte’s Select. Keyboard: Enter, Space or the arrow keys open it; arrows move; typing jumps to matching options; Enter picks; Escape closes. A hidden native <select> carries the value, so it’s submitted with a normal form when you give it a name. Disabled options are announced as unavailable.

For two to five options that should all be visible, prefer a RadioGroup.

Props

Prop	Type
label	string	Required
options	{ value: string; label: string; disabled?: boolean }[]
value / defaultValue	string	The selected option’s value
onChange	(value: string | undefined) => void
placeholder	string	Shown before anything is chosen. Default “Choose…”
description, error, hideLabel, name, required, disabled		As in TextField

The open list is rendered at the end of <body>, so it sets its own bg-popover colours. Highlighted and selected items have data-highlighted and data-selected.