이 사이트는 shadcn-svelte 공식 문서의 한국어 번역입니다.
6.9k

Select

Previous Next

버튼으로 트리거되는 옵션 목록을 표시합니다.

Docs API Reference 
<script lang="ts">
  import * as Select from "$lib/components/ui/select/index.js";
 
  const fruits = [
    { value: "apple", label: "사과" },
    { value: "banana", label: "바나나" },
    { value: "blueberry", label: "블루베리" },
    { value: "grapes", label: "포도" },
    { value: "pineapple", label: "파인애플" }
  ];
 
  let value = $state("");
 
  const triggerContent = $derived(
    fruits.find((f) => f.value === value)?.label ?? "과일을 선택하세요"
  );
</script>
 
<Select.Root type="single" name="favoriteFruit" bind:value>
  <Select.Trigger class="w-[180px]">
    {triggerContent}
  </Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Label>과일</Select.Label>
      {#each fruits as fruit (fruit.value)}
        <Select.Item
          value={fruit.value}
          label={fruit.label}
          disabled={fruit.value === "grapes"}
        >
          {fruit.label}
        </Select.Item>
      {/each}
    </Select.Group>
  </Select.Content>
</Select.Root>

설치

pnpm dlx shadcn-svelte@latest add select

사용법

<script lang="ts">
  import * as Select from "$lib/components/ui/select/index.js";
</script>
<Select.Root type="single">
  <Select.Trigger class="w-[180px]"></Select.Trigger>
  <Select.Content>
    <Select.Item value="light">라이트</Select.Item>
    <Select.Item value="dark">다크</Select.Item>
    <Select.Item value="system">시스템</Select.Item>
  </Select.Content>
</Select.Root>

예제

스크롤 가능

<script lang="ts">
  import * as Select from "$lib/components/ui/select/index.js";
</script>
 
<Select.Root type="single">
  <Select.Trigger class="w-[280px]">시간대를 선택하세요</Select.Trigger>
  <Select.Content>
    <Select.Group>
      <Select.Label>북미</Select.Label>
      <Select.Item value="est">Eastern Standard Time (EST)</Select.Item>
      <Select.Item value="cst">Central Standard Time (CST)</Select.Item>
      <Select.Item value="mst">Mountain Standard Time (MST)</Select.Item>
      <Select.Item value="pst">Pacific Standard Time (PST)</Select.Item>
      <Select.Item value="akst">Alaska Standard Time (AKST)</Select.Item>
      <Select.Item value="hst">Hawaii Standard Time (HST)</Select.Item>
    </Select.Group>
    <Select.Group>
      <Select.Label>유럽 및 아프리카</Select.Label>
      <Select.Item value="gmt">Greenwich Mean Time (GMT)</Select.Item>
      <Select.Item value="cet">Central European Time (CET)</Select.Item>
      <Select.Item value="eet">Eastern European Time (EET)</Select.Item>
      <Select.Item value="west">Western European Summer Time (WEST)</Select.Item
      >
      <Select.Item value="cat">Central Africa Time (CAT)</Select.Item>
      <Select.Item value="eat">East Africa Time (EAT)</Select.Item>
    </Select.Group>
    <Select.Group>
      <Select.Label>아시아</Select.Label>
      <Select.Item value="msk">Moscow Time (MSK)</Select.Item>
      <Select.Item value="ist">India Standard Time (IST)</Select.Item>
      <Select.Item value="cst_china">China Standard Time (CST)</Select.Item>
      <Select.Item value="jst">Japan Standard Time (JST)</Select.Item>
      <Select.Item value="kst">Korea Standard Time (KST)</Select.Item>
      <Select.Item value="ist_indonesia"
        >Indonesia Central Standard Time (WITA)</Select.Item
      >
    </Select.Group>
    <Select.Group>
      <Select.Label>호주 및 태평양</Select.Label>
      <Select.Item value="awst"
        >Australian Western Standard Time (AWST)</Select.Item
      >
      <Select.Item value="acst"
        >Australian Central Standard Time (ACST)</Select.Item
      >
      <Select.Item value="aest"
        >Australian Eastern Standard Time (AEST)</Select.Item
      >
      <Select.Item value="nzst">New Zealand Standard Time (NZST)</Select.Item>
      <Select.Item value="fjt">Fiji Time (FJT)</Select.Item>
    </Select.Group>
    <Select.Group>
      <Select.Label>남미</Select.Label>
      <Select.Item value="art">Argentina Time (ART)</Select.Item>
      <Select.Item value="bot">Bolivia Time (BOT)</Select.Item>
      <Select.Item value="brt">Brasilia Time (BRT)</Select.Item>
      <Select.Item value="clt">Chile Standard Time (CLT)</Select.Item>
    </Select.Group>
  </Select.Content>
</Select.Root>