> For the complete documentation index, see [llms.txt](https://sjsofttech.gitbook.io/nextjs-framework/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://sjsofttech.gitbook.io/nextjs-framework/components-ui/command.md).

# Command

<figure><img src="/files/pCTYJm7ckxhh0QCCx2JC" alt=""><figcaption></figcaption></figure>

### 1. CommandGroup

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>heading</td><td>boolean</td><td>-</td><td>Heading 노출 여부</td></tr><tr><td>headingText</td><td>string | React.ReactNode</td><td>-</td><td>Heading 텍스트</td></tr><tr><td>button</td><td>boolean</td><td>-</td><td>버튼 노출 여부</td></tr><tr><td>buttonText</td><td>string</td><td>-</td><td>버튼 텍스트</td></tr><tr><td>buttonClick</td><td>function</td><td>-</td><td>버튼 클릭 이벤트 핸들러</td></tr><tr><td>variant</td><td>'default' | 'select' | 'checkbox' | 'toggle'</td><td>-</td><td>타입</td></tr><tr><td>className</td><td>string</td><td>-</td><td>커스텀 스타일 적용</td></tr><tr><td>items</td><td><p>{<br>  value: string<br>  label: string<br>  description: string</p><p>  disabled: boolean</p><p>  checked: boolean</p><p>  selected: boolean</p><p>  active: boolean<br>}[]</p></td><td>-</td><td>그룹 아이템<br>value: 선택 값<br>label: 라벨 텍스트<br>description: 상세 설명<br>disabled: 비활성화 여부<br>checked: 체크 여부<br>selected: 선택 여부<br>active: 활성화 여부</td></tr><tr><td>onItemSelect</td><td>function</td><td>-</td><td>아이템 선택 이벤트 핸들러</td></tr><tr><td>accentColor</td><td>string</td><td>-</td><td>강조 색상</td></tr><tr><td>hoverColor</td><td>string</td><td>-</td><td>hover 색상</td></tr><tr><td>icon</td><td>React.ReactNode</td><td>-</td><td>라벨 아이콘</td></tr></tbody></table>

### Usage

```typescript
<CommandGroup
  heading={true}
  headingText={'Heading'}
  button={true}
  buttonText={'적용'}
  buttonClick={() => {}}
  variant={'select'}
  items={[
    {
      value: 'item01',
      label: 'Command Item',
    },
    {
      value: 'item02',
      label: 'Command Item',
    }
  ]}
  onItemSelect={() => {}}
/>
```

***

### 2. CommandItemBase

### Props

<table><thead><tr><th width="210">Prop</th><th width="164">Type</th><th width="108">Default</th><th>Description</th></tr></thead><tbody><tr><td>value</td><td>string</td><td>-</td><td>선택 값</td></tr><tr><td>label</td><td>string</td><td>-</td><td>라벨 텍스트</td></tr><tr><td>icon</td><td>React.ReactNode</td><td>-</td><td>라벨 아이콘</td></tr><tr><td>description</td><td>string</td><td>-</td><td>상세 설명</td></tr><tr><td>disabled</td><td>boolean</td><td>-</td><td>비활성화 여부</td></tr><tr><td>onSelect</td><td>function</td><td>-</td><td>아이템 선택 이벤트 핸들러</td></tr><tr><td>className</td><td>string</td><td>-</td><td>커스텀 스타일 적용</td></tr><tr><td>accentColor</td><td>string</td><td>-</td><td>강조 색상</td></tr><tr><td>hoverColor</td><td>string</td><td>-</td><td>hover 색상</td></tr></tbody></table>

### Usage

```typescript
<CommandItemBase
  value={'item01'}
  label={'Command Item'}
  icon={<Calendar16Regular />}  
/>
```