# Command

> A bordered panel for searching and choosing among a list of actions: Command.Input holds the query row, Command.List scrolls through Command.Item rows, and Command.Empty holds a message for when nothing matches.

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

Renders the panel's root host: an elevated `<div>` rounded concentric
with Command.Item's corners, stacking its compound parts in a
column and clipping Command.List's scrolled content to that radius.

## Examples

```tsx
<Command aria-label={t("command.label")}>
	<Command.Input aria-label={t("command.label")} placeholder={t("command.placeholder")} />
	<Command.List>
		<Command.Item value="new-file">{t("command.newFile")}</Command.Item>
		<Command.Item value="new-folder">{t("command.newFolder")}</Command.Item>
	</Command.List>
	<Command.Empty>{t("command.empty")}</Command.Empty>
</Command>
```

## Props

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The panel's compound parts: Command.Input, Command.List, Command.Empty. |

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


### Command.Input

Renders the panel's query row: a `<div>` bordered along its block-end edge wrapping a native `<input>` sized to the row's full padding and height, marked `data-command-input` for a paired filter mixin to read.

Takes no props of its own.

### Command.List

Renders the panel's scrollable option region: a `<div>` carrying the `listbox` role, capped at a fixed block size, its small inline padding leaving room for a selected Command.Item's own rounded corners.

| Prop | Type | Description |
| --- | --- | --- |
| `children` | `RemixNode` | The Command.Item rows (and, once nothing matches, Command.Empty) to scroll through. |

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


### Command.Item

Renders a single row: a `<div>` carrying the `option` role, its `value` mirrored onto `data-value` for a paired filter behavior to read.

| Prop | Type | Description |
| --- | --- | --- |
| `value` | `string` | Plain-text value identifying this row's content. A paired filter behavior matches typed text against this value directly, so it stays required even when the visible content is already plain text. |
| `children?` | `RemixNode` | The row's visible content: a label, and optionally a leading icon or trailing hint. |

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


### Command.Empty

Renders the panel's no-match message: a centered, muted passage of small text filling Command.List's content area, carrying a `data-command-empty` marker a paired filter behavior reads to toggle it.

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