Command

A searchable list of commands, like a command palette.

Command.tsx

import {
  Command,
  CommandEmpty,
  CommandGroup,
  CommandInput,
  CommandItem,
  CommandList,
  Surface
} from 'alinea/components'
import {
  IcRoundFormatQuote,
  IcRoundImage,
  IcRoundNotes,
  IcRoundPanorama
} from 'alinea/dashboard/icons'

export function CommandExample() {
  return (
    <Surface style={{width: 280}}>
      <Command>
        <CommandInput aria-label="Search blocks" placeholder="Add a block…" />
        <CommandList aria-label="Blocks">
          <CommandEmpty>No matching blocks</CommandEmpty>
          <CommandGroup heading="Blocks">
            <CommandItem value="text" icon={IcRoundNotes}>
              Text
            </CommandItem>
            <CommandItem value="image" icon={IcRoundImage} keywords={['photo']}>
              Image
            </CommandItem>
            <CommandItem value="hero" icon={IcRoundPanorama}>
              Hero
            </CommandItem>
            <CommandItem value="quote" icon={IcRoundFormatQuote}>
              Quote
            </CommandItem>
          </CommandGroup>
        </CommandList>
      </Command>
    </Surface>
  )
}

Props

`<Command>`

A search input that filters a list of actions, as used in command palettes and pickers. Compose with CommandInput, CommandList, CommandEmpty, CommandGroup, CommandItem and CommandSeparator.

PropTypeDefaultDescription

shouldFilterbooleanDefault trueWhether items are filtered by the search query. Set to false when filtering the items yourself. Defaults to true.

filter(value: string, search: string, keywords: Array<string>) => number | booleanDefault –Custom matcher for an item: return 0 or false to hide it. keywords holds the text of the item followed by its keywords. By default items are shown when their text or one of their keywords contains the query, ignoring case and accents.

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<CommandInput>`

PropTypeDefaultDescription

placeholderstringDefault –

autoFocusbooleanDefault –

iconIconType | ReactElementDefault –Defaults to a search icon

onValueChange(value: string) => voidDefault –Called when the search query changes

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<CommandList>`

PropTypeDefaultDescription

children*ReactNodeDefault –CommandItem, CommandGroup, CommandSeparator and CommandEmpty elements

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<CommandEmpty>`

Place directly inside CommandList

PropTypeDefaultDescription

children*ReactNodeDefault –Shown when no item matches the search query

Also accepts className and style and data-* attributes.

`<CommandGroup>`

PropTypeDefaultDescription

headingReactNodeDefault –

Also accepts className and style, id and aria-* labelling attributes and data-* attributes.

`<CommandItem>`

PropTypeDefaultDescription

value*stringDefault –Identifies the item, passed to onSelect and the filter

keywordsArray<string>Default –Additional words the item is found by

textValuestringDefault –Text the item is found by, defaults to its string children

onSelect(value: string) => voidDefault –Called when the item is clicked or chosen with Enter

iconIconType | ReactElementDefault –

disabledbooleanDefault –

Also accepts className and style and data-* attributes.

`<CommandSeparator>`

Accepts className and style and data-* attributes.