메인 콘텐츠로 건너뛰기
Frutjam logo Frutjam
v2.2.2
Theme

구성요소 선택

마지막 업데이트:

기본, 보조, 악센트 및 의미 색상 변형이 포함된 CSS 전용 Tailwind CSS 선택 드롭다운입니다. 크기 xs-xl, 고스트 스타일. WCAG AA 액세스 가능하며 Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

선택 구성 요소는 사용자에게 상호 배타적인 옵션의 드롭다운 목록을 제공하여 사전 정의된 세트에서 하나의 값을 선택할 수 있도록 합니다. 기본 HTML 선택 요소로 구축되고 Tailwind CSS 스타일로 개선된 선택 기능은 다양한 크기, 색상 및 상태를 지원합니다. 접근 가능하고 키보드로 탐색할 수 있는 선택 드롭다운은 대규모 옵션 목록, 국가 선택 및 기본 설정 패널에서 선택하는 데 이상적입니다.

CSS 전용이며 JavaScript가 필요하지 않습니다. WCAG AA 액세스 가능 및 프레임워크에 구애받지 않음 — Django, HTMX, Laravel, React 및 모든 스택에서 작동합니다.

수업 유형 설명
select베이스스타일이 적용된 기본 선택 드롭다운
select-soft스타일음소거된 색조 배경
select-ghost스타일초점이 맞춰질 때까지 테두리가 보이지 않음
select-dashed스타일점선 테두리 스타일
select-xs크기아주 작은
select-sm크기작은
select-md크기중간(기본값)
select-lg크기크기가 큰
select-xl크기특대
select-2xl크기2× 특대형
select-primary색상기본 테마 색상 테두리
select-secondary색상보조 테마 색상 테두리
select-accent색상악센트 테마 색상 테두리
select-neutral색상중립 테마 색상 테두리
select-info색상정보 의미 색상 테두리
select-success색상성공 의미 색상 테두리
select-warning색상경고 의미 색상 테두리
select-error색상오류 의미 색상 테두리

기본 사용법

1
2
3
4
5
6
<select class="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

1
2
3
4
5
6
<select className="select">
  <option disabled selected>Pick an option</option>
  <option>Option 1</option>
  <option>Option 2</option>
  <option>Option 3</option>
</select>

크기 선택

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
<select class="select select-xs">
  <option>Extra Small</option>
  <option selected>Select</option>
</select>

<select class="select select-sm">
  <option>Small</option>
  <option selected>Select</option>
</select>

<select class="select select-md">
  <option>Medium</option>
  <option selected>Select</option>
</select>

<select class="select select-lg">
  <option>Large</option>
  <option selected>Select</option>
</select>

<select class="select select-xl">
  <option>Extra Large</option>
  <option selected>Select</option>
</select>

<select class="select select-2xl">
  <option>2X Large</option>
  <option selected>Select</option>
</select>

색상 선택

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
<select class="select">
  <option selected>Default</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-primary">
  <option selected>Primary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-secondary">
  <option selected>Secondary</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-accent">
  <option selected>Accent</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-info">
  <option selected>Info</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-success">
  <option selected>Success</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-warning">
  <option selected>Warning</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

<select class="select select-error">
  <option selected>Error</option>
  <option>Option 1</option>
  <option>Option 2</option>
</select>

스타일 선택

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
<select class="select">
  <option selected>Default Style</option>
  <option>Option 1</option>
</select>

<select class="select select-soft">
  <option selected>Soft</option>
  <option>Option 1</option>
</select>

<select class="select select-dashed">
  <option selected>Dashed</option>
  <option>Option 1</option>
</select>

<select class="select select-ghost">
  <option selected>Ghost</option>
  <option>Option 1</option>
</select>

장애인 선택

html 
1
2
3
4
<select class="select" disabled>
  <option>Disabled Select</option>
  <option selected>Option 1</option>
</select>

라벨로 선택

html 
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
<label>
  <span>Choose your favorite country</span>
  <select class="select select-outline w-full max-w-xs">
    <option disabled selected>Pick one</option>
    <option>United States</option>
    <option>Canada</option>
    <option>Mexico</option>
    <option>Brazil</option>
  </select>
</label>

Claude Code, Cursor 또는 다른 AI 편집기를 사용하시나요?

Cherry MCP는 AI 편집기에 요청 시 정확한 선택하다 클래스 이름과 구조를 제공합니다. 더 이상 환각에 빠진 수업은 없습니다.

Cherry MCP를 사용해 보세요