---
description: 단일 선택 컴포넌트
---

# single-select

<figure><img src="https://3212561211-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FojaIWzOttDuV549cYsPQ%2Fuploads%2Fu0DDSvvPuac0VnV08Oib%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-02-20%20%E1%84%8B%E1%85%A9%E1%84%92%E1%85%AE%206.39.04.png?alt=media&#x26;token=e1279a61-e518-432d-9463-41cab23b0767" 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>name</td><td>string</td><td>-</td><td>select 고유 이름</td></tr><tr><td>options</td><td><a data-footnote-ref href="#user-content-fn-1">ArrayList</a></td><td>-</td><td>옵션 데이터 목록</td></tr><tr><td>value</td><td>string</td><td>-</td><td>선택 값</td></tr><tr><td>defaultValue</td><td>string</td><td>-</td><td>기본 선택 값</td></tr><tr><td>className</td><td>string</td><td>-</td><td>커스텀 스타일</td></tr><tr><td>onChange</td><td>function</td><td>-</td><td>선택 값 변경 핸들러</td></tr><tr><td>children</td><td>React.ReactNode</td><td>-</td><td>선택 영역 커스텀 컴포넌트</td></tr></tbody></table>



### Usage

```typescript
import { SingleSelect } from '@/src/components/ui'

function SingleSelectDemo() {
  return (
    <SingleSelect
      name={'singleSelect'}
      options={[
        { value: 'apple', label: 'Apple' },
        { value: 'banana', label: 'Banana' },
        { value: 'blueberry', label: 'Blueberry' },
        { value: 'grapes', label: 'Grapes' },
        { value: 'pineapple', label: 'Pineapple' },
      ]}
      value={'banana'}
      onChange={() => {}}
    />
  )
}
```

[^1]: {

    &#x20; label: string  // 노출 값

    &#x20; value: string  // 고유 값

    }
