Command

A searchable action menu with arrow-key navigation.

Interactive playground

LIVE PREVIEW

Loading preview…

Generated code

import { Command } from '@vrum/ui';
import { CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem } from '@vrum/ui';

<Command
  label={"Workspace commands"}
>
  <CommandInput placeholder="Search actions…" /><CommandList><CommandEmpty>No actions found.</CommandEmpty><CommandGroup heading="Workspace"><CommandItem value="projects">Open projects</CommandItem><CommandItem value="team">Manage team</CommandItem><CommandItem value="settings">Settings</CommandItem></CommandGroup></CommandList>
</Command>

Command props

Prop	Type	Default	Description
`children`	`React.ReactNode`	none	Content rendered inside the component.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| (readonly string[] & string)`	none	Optional default item value when it is initially rendered.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`label`	`string`	`"Search commands"`	Visible or accessible label.
`shouldFilter`	`boolean`	none	Optionally set to `false` to turn off the automatic filtering and sorting. If `false`, you must conditionally render valid items based on the search query yourself.
`filter`	`CommandFilter`	none	Custom filter function for whether each command menu item should matches the given search query. It should return a number between 0 and 1, with 1 being the best match and 0 being hidden entirely. By default, uses the `command-score` library.
`value`	`string`	none	Optional controlled state of the selected command menu item.
`onValueChange`	`((value: string) => void)`	none	Event handler called when the selected item of the menu changes.
`loop`	`boolean`	none	Optionally set to `true` to turn on looping around when using the arrow keys.
`disablePointerSelection`	`boolean`	none	Optionally set to `true` to disable selection via pointer events.
`vimBindings`	`boolean`	none	Set to `false` to disable ctrl+n/j/p/k shortcuts. Defaults to `true`.

CommandInput props

Prop	Type	Default	Description
`asChild`	`boolean`	none	as child configuration.
`disabled`	`boolean`	none	Disable user interaction.
`name`	`string`	none	name configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`children`	`ReactNode`	none	Content rendered inside the component.
`onFocus`	`FocusEventHandler<HTMLInputElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLInputElement>`	none	on blur configuration.
`onSubmit`	`SubmitEventHandler<HTMLInputElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLInputElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLInputElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLInputElement>`	none	on select configuration.
`checked`	`boolean`	none	checked configuration.
`maxLength`	`number`	none	max length configuration.
`placeholder`	`string`	none	Hint shown when the field is empty.
`readOnly`	`boolean`	none	read only configuration.
`required`	`boolean`	none	required configuration.
`value`	`string`	none	Optional controlled state for the value of the search input.
`onValueChange`	`((search: string) => void)`	none	Event handler called when the search value changes.

CommandList props

Prop	Type	Default	Description
`children`	`React.ReactNode`	none	Content rendered inside the component.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`label`	`string`	none	Accessible label for this List of suggestions. Not shown visibly.

CommandEmpty props

Prop	Type	Default	Description
`children`	`React.ReactNode`	none	Content rendered inside the component.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.

CommandGroup props

Prop	Type	Default	Description
`children`	`React.ReactNode`	none	Content rendered inside the component.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`onSelect`	`ReactEventHandler<HTMLDivElement>`	none	on select configuration.
`heading`	`React.ReactNode`	none	Optional heading to render for this group.
`value`	`string`	none	If no heading is provided, you must provide a value that is unique for this group.
`forceMount`	`boolean`	none	Whether this group is forcibly rendered regardless of filtering.

CommandItem props

Prop	Type	Default	Description
`children`	`React.ReactNode`	none	Content rendered inside the component.
`asChild`	`boolean`	none	as child configuration.
`defaultChecked`	`boolean`	none	default checked configuration.
`defaultValue`	`string \| number \| readonly string[]`	none	Initial value for an uncontrolled component.
`autoFocus`	`boolean`	none	auto focus configuration.
`className`	`string`	none	Additional CSS classes.
`id`	`string`	none	id configuration.
`style`	`CSSProperties`	none	Inline style overrides.
`aria-invalid`	`boolean \| "false" \| "true" \| "grammar" \| "spelling"`	none	Indicates the entered value does not conform to the format expected by the application.
`aria-label`	`string`	none	Defines a string value that labels the current element.
`onFocus`	`FocusEventHandler<HTMLDivElement>`	none	on focus configuration.
`onBlur`	`FocusEventHandler<HTMLDivElement>`	none	on blur configuration.
`onChange`	`ChangeEventHandler<HTMLDivElement, Element>`	none	Called when the input value changes.
`onSubmit`	`SubmitEventHandler<HTMLDivElement>`	none	Called when the form is submitted.
`onKeyDown`	`KeyboardEventHandler<HTMLDivElement>`	none	on key down configuration.
`onClick`	`MouseEventHandler<HTMLDivElement>`	none	Called when the control is activated.
`disabled`	`boolean`	none	Whether this item is currently disabled.
`onSelect`	`((value: string) => void)`	none	Event handler for when this item is selected, either via click or keyboard selection.
`value`	`string`	none	A unique value for this item. If no value is provided, it will be inferred from `children` or the rendered `textContent`. If your `textContent` changes between renders, you _must_ provide a stable, unique `value`.
`keywords`	`string[]`	none	Optional keywords to match against when filtering.
`forceMount`	`boolean`	none	Whether this item is forcibly rendered regardless of filtering.

Command

Interactive playground

Props

Command props

CommandInput props

CommandList props

CommandEmpty props

CommandGroup props

CommandItem props

Command

Interactive playground

Props

Command props

CommandInput props

CommandList props

CommandEmpty props

CommandGroup props

CommandItem props