DryUI — Human-led, agent-assisted UI

Deploy from repository

5 of 5 matches across 2 connected organizations.

Accessibility

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte

<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { Combobox } from '@dryui/ui';
</script>

<Combobox.Root bind:value={selectedFramework} name="framework">
  <Combobox.Input placeholder="Search frameworks..." />
  <Combobox.Content>
    <Combobox.Item value="svelte" index={0}>Svelte</Combobox.Item>
    <Combobox.Item value="react" index={1}>React</Combobox.Item>
  </Combobox.Content>
</Combobox.Root>

Import options

Root package

import { Combobox } from '@dryui/ui'

Per-component subpath

import { Combobox } from '@dryui/ui/combobox'

API

Props, CSS variables, and the public data attributes you can target when styling.

Prop	Type	Description	Default	Required	Bindable
Combobox.Root
open	boolean	Whether the overlay or disclosure is currently open.	—	—	✓
value	string	Current controlled or bindable value.	—	—	✓
disabled	boolean	Prevents interaction and applies disabled styling.	—	—	—
name	string Adds a hidden input so the selected value participates in native form submission.	Field name used during native form submission.	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Combobox.Input
size	smmdlg	Size preset affecting density, spacing, or typography.	'md'	—	—
leading	Snippet	—	—	—	—
trailing	Snippet	—	—	—	—
placeholder	string	Hint text shown when no value is selected or entered.	''	—	—
Combobox.Content
placement	toptop-starttop-endbottombottom-startbottom-endleftleft-startleft-endrightright-startright-end	—	'bottom-start'	—	—
offset	number	—	4	—	—
loading	boolean	—	false	—	—
loadingContent	Snippet	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Combobox.Item
value	string	Current controlled or bindable value.	—	✓	—
index	number	—	—	✓	—
disabled	boolean	Prevents interaction and applies disabled styling.	false	—	—
icon	Snippet	—	—	—	—
children	Snippet	Content rendered inside the component.	—	✓	—
Combobox.Empty
children	Snippet	Content rendered inside the component.	—	✓	—
Combobox.Group
label	string	Visible label text shown for the control or item.	—	✓	—
children	Snippet	Content rendered inside the component.	—	✓	—

API

Combobox.Root

Combobox.Input

Combobox.Content

Combobox.Item

Combobox.Empty

Combobox.Group