셀렉트 Select

셀렉트는 사용자에게 여러 개의 옵션 목록을 팝업으로 제공하여 그 중 한 개의 값을 선택할 수 있도록 하는 경우에 사용한다.

기본

KrdsFormGroup·KrdsFormLabel·KrdsFormHint와 함께 써서 레이블과 도움말을 연결합니다.

거주 지역

현재 거주하고 있는 지역을 선택해 주세요

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFormGroup, KrdsFormHint, KrdsFormLabel, KrdsSelect } from '@krds.ui/vue'

  const selected = ref('')
  const options = [
    { value: 'seoul', label: '서울특별시' },
    { value: 'busan', label: '부산광역시' },
    { value: 'daegu', label: '대구광역시' },
    { value: 'incheon', label: '인천광역시' },
    { value: 'gwangju', label: '광주광역시' },
    { value: 'daejeon', label: '대전광역시' },
    { value: 'ulsan', label: '울산광역시' },
    { value: 'sejong', label: '세종특별자치시' }
  ]
</script>

<template>
  <div style="max-width: 400px">
    <KrdsFormGroup>
      <KrdsFormLabel for="city-select">거주 지역</KrdsFormLabel>
      <KrdsSelect id="city-select" v-model="selected" :options="options" placeholder="선택" />
      <KrdsFormHint>현재 거주하고 있는 지역을 선택해 주세요</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

사이즈

Large

Medium

Small

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFormGroup, KrdsFormLabel, KrdsSelect } from '@krds.ui/vue'

  const large = ref('large')
  const medium = ref('medium')
  const small = ref('small')
  const options = [
    { value: 'large', label: 'large' },
    { value: 'medium', label: 'medium' },
    { value: 'small', label: 'small' }
  ]
</script>

<template>
  <div style="display: flex; flex-direction: column; gap: 2rem; max-width: 400px">
    <KrdsFormGroup>
      <KrdsFormLabel for="select-large">Large</KrdsFormLabel>
      <KrdsSelect id="select-large" v-model="large" size="large" :options="options" />
    </KrdsFormGroup>
    <KrdsFormGroup>
      <KrdsFormLabel for="select-medium">Medium</KrdsFormLabel>
      <KrdsSelect id="select-medium" v-model="medium" size="medium" :options="options" />
    </KrdsFormGroup>
    <KrdsFormGroup>
      <KrdsFormLabel for="select-small">Small</KrdsFormLabel>
      <KrdsSelect id="select-small" v-model="small" size="small" :options="options" />
    </KrdsFormGroup>
  </div>
</template>

정렬 스타일

목록의 정렬 기준처럼 보이는 레이블 없이 쓰는 셀렉트입니다. title로 이름을 제공합니다.

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsSelect } from '@krds.ui/vue'

  const sort = ref('latest')
  const options = [
    { value: 'latest', label: '최신순' },
    { value: 'popular', label: '인기순' },
    { value: 'name', label: '이름순' }
  ]
</script>

<template>
  <KrdsSelect id="select-sort" v-model="sort" sort :options="options" title="정렬 기준" />
</template>

에러 상태

신청 유형

신청 유형을 선택해 주세요

vue

<script setup lang="ts">
  import { ref } from 'vue'
  import { KrdsFormGroup, KrdsFormHint, KrdsFormLabel, KrdsSelect } from '@krds.ui/vue'

  const selected = ref('')
  const options = [
    { value: 'item1', label: '항목1' },
    { value: 'item2', label: '항목2' },
    { value: 'item3', label: '항목3' }
  ]
</script>

<template>
  <div style="max-width: 400px">
    <KrdsFormGroup>
      <KrdsFormLabel for="select-error">신청 유형</KrdsFormLabel>
      <KrdsSelect id="select-error" v-model="selected" state="error" :options="options" placeholder="선택" />
      <KrdsFormHint type="error">신청 유형을 선택해 주세요</KrdsFormHint>
    </KrdsFormGroup>
  </div>
</template>

KrdsSelect

Props

이름	타입	기본값	설명
`class`	`KrdsClassValue`	-	CSS 클래스
`name`	`string`	-	폼 필드 이름
`sort`	`boolean`	`false`	정렬 스타일 여부
`title`	`string`	-	타이틀
`id`	`string`	-	HTML ID
`disabled`	`boolean`	`false`	비활성화 여부
`size`	`Size`	`'medium'`	선택 크기
`modelValue`	`string \| number \| null`	`null`	선택된 값
`placeholder`	`string`	`'선택'`	플레이스홀더
`readonly`	`boolean`	`false`	읽기 전용 여부
`state`	`"default" \| "error" \| "success" \| "information"`	`'default'`	입력 상태
`options`	`SelectOption[]`	`[]`	옵션 목록

Events

이름	인자	설명
`blur`	`[event: FocusEvent]`	초점을 잃었을 때
`focus`	`[event: FocusEvent]`	초점을 받았을 때
`update:modelValue`	`[value: string \| number \| null]`	선택한 값이 바뀔 때 (v-model)

Slots

이름	설명
`default`	직접 넣는 option 요소 (options 속성과 함께 쓸 수 있음)

셀렉트 Select ​

기본 ​

사이즈 ​

정렬 스타일 ​

에러 상태 ​

KrdsSelect ​