# ComboBox

> A single-line text control paired with a native list of suggested values: a ComboBox.Group row housing the ComboBox.Input control and a trailing ComboBox.Button disclosure glyph, all stacked beneath a caption or above supporting copy in a single column with a small gap.

```ts
import { ComboBox } from "@sdxc/ui";
```

Renders a plain host stacking this control's compound parts — a caption,
the ComboBox.Group row, a `<datalist>` of suggested values, and
supporting copy — in a single column with a small gap between them.

## Examples

```tsx
<ComboBox>
	<Label htmlFor="fruit">{t("form.fruit.label")}</Label>
	<ComboBox.Group>
		<ComboBox.Input id="fruit" name="fruit" list="fruit-options" />
		<ComboBox.Button aria-label={t("form.fruit.toggle")} />
	</ComboBox.Group>
	<datalist id="fruit-options">
		<option value="Apple" />
		<option value="Banana" />
	</datalist>
</ComboBox>
```

## Props

Also accepts everything in `TagProps<"div">`.


### ComboBox.Group

Renders ComboBox's control row: a plain flex host laying ComboBox.Input and ComboBox.Button side by side, the button pulled back over the input's padding so they read as one field.

Also accepts everything in `TagProps<"div">`.


### ComboBox.Input

Renders ComboBox's text control: an Input that grows to fill its row, reserves inline-end padding for ComboBox.Button's glyph, and carries every Input interaction state unchanged.

Takes no props of its own.

### ComboBox.Button

Renders ComboBox's trailing disclosure glyph: a native `<button>` pulled back over ComboBox.Input's padding so it reads as part of the same field, its chevron marked `aria-hidden` since it carries no text.

Also accepts everything in `Omit<TagProps<"button">, "children">`.