S

command

Searchable dropdown field powered by cmdk. Inline search with keyboard navigation.

command

A searchable dropdown field powered by cmdk. Unlike combobox (which uses a popover), command renders an inline command palette with keyboard navigation.

Note: The command field requires the consumer to provide cmdk-based components. Install them with npx shadcn@latest add command.

Basic Usage

FormBuilder.create('search-form')
  .addField('framework', (f) =>
    f
      .type('command')
      .label('Framework')
      .options([
        { label: 'React', value: 'react' },
        { label: 'Vue', value: 'vue' },
        { label: 'Svelte', value: 'svelte' },
        { label: 'Angular', value: 'angular' },
        { label: 'Solid', value: 'solid' },
      ])
      .required(),
  )
  .addStep('main', ['framework'])
  .build();

Props

PropTypeDefaultDescription
optionsOption[]RequiredArray of { label, value, icon? }
placeholderstring"Select..."Text shown when no value selected
searchPlaceholderstring"Search..."Placeholder in the search input
emptyTextstring"No results found."Text shown when search has no matches

command vs combobox

Both fields use cmdk components under the hood. The difference is presentation:

Featurecommandcombobox
ContainerInline (always visible)Popover (click to open)
SearchAlways accessibleAccessible after opening
Use casePrimary selection, prominent placementSpace-constrained, standard form field

Both support icons on options, custom search/empty text, and the same validation rules.

Required Components

The command field requires these components in your registry:

  • Command, CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem
  • FormField, FormControl, Field, FieldLabel, FieldDescription, FieldError

Install the cmdk components:

npx shadcn@latest add command

With Icons

import { Globe, Zap, Palette } from 'lucide-react';

.addField('framework', (f) => f.type('command').label('Framework')
  .options([
    { label: 'React', value: 'react', icon: <Globe /> },
    { label: 'Vue', value: 'vue', icon: <Zap /> },
    { label: 'Svelte', value: 'svelte', icon: <Palette /> },
  ])
)

TypeScript

interface CommandFieldProps extends BaseFieldProps {
  type: 'command';
  options: Option[];
  schema: z.ZodType | ValidationRules;
  placeholder?: string;
  searchPlaceholder?: string;
  emptyText?: string;
}