# TableCellSelect

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2FfKQQV5ZpfzSnbtHqOYgK%2F%E1%84%89%E1%85%B3%E1%84%8F%E1%85%B3%E1%84%85%E1%85%B5%E1%86%AB%E1%84%89%E1%85%A3%E1%86%BA%202025-04-02%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%205.33.39.png?alt=media&#x26;token=211175d9-81d4-44e0-bbb0-3a19a72d16b3" alt=""><figcaption></figcaption></figure>

### 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>variant</td><td>'text' | 'tag'</td><td>-</td><td>타입</td></tr><tr><td>state</td><td>'default' | 'loading' | 'error' | 'success' | 'disabled' | 'readonly'</td><td>'default'</td><td>상태</td></tr><tr><td>contained</td><td>boolean</td><td>-</td><td>contained 여부</td></tr><tr><td>options</td><td>{<br>  value: string<br>  label: string<br>}[]</td><td>-</td><td>select option 아이템<br>value: 선택 값<br>label: 라벨 텍스트</td></tr><tr><td>value</td><td>string</td><td>-</td><td>선택 값</td></tr><tr><td>onChange</td><td>function</td><td>-</td><td>값 선택 이벤트 핸들러</td></tr><tr><td>placeholder</td><td>string</td><td>-</td><td>플레이스 홀더</td></tr><tr><td>borderColor</td><td>string</td><td>-</td><td>variant가 tag일 경우 tag의 border color</td></tr><tr><td>bgColor</td><td>string</td><td>-</td><td>variant가 tag일 경우 tag의 background color</td></tr><tr><td>textColor</td><td>string</td><td>-</td><td>variant가 tag일 경우 tag의 text color</td></tr></tbody></table>

### Usage

```typescript
<TableCellSelect
  variant={'tag'}
  options={[
    {
      value: 'value01',
      label: '셀렉트 아이템',
    },
    {
      value: 'value02',
      label: '셀렉트 아이템',
    },
    {
      value: 'value03',
      label: '셀렉트 아이템',
    },
  ]}
  value={'value01'}
  onChange={() => {}}
  placeholder={''}
  borderColor={'#22C55E47'}
  bgColor={'#FFFFFF'}
  textColor={'#16A34A'}
/>
```
