셀렉트

<div class="fieldset">
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_name">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_name" class="krds-form-select" title="선택">
				<option value="">항목1</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint">도움말</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_name4">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_name4" class="krds-form-select completed" title="선택">
				<option value="" selected>선택완료 상태</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint">도움말</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_error">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_error" class="krds-form-select is-error" title="선택">
				<option value="">항목1</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint-invalid">도움말</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_name3">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_name3" class="krds-form-select" title="선택" disabled>
				<option value="">disabled</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint">도움말</p>
	</div>
	
</div>

<template>
  <div class="fieldset">
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_name">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_name" class="krds-form-select" title="선택">
				<option value="">항목1</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint">도움말</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_name4">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_name4" class="krds-form-select completed" title="선택">
				<option value="" selected>선택완료 상태</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint">도움말</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_error">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_error" class="krds-form-select is-error" title="선택">
				<option value="">항목1</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint-invalid">도움말</p>
	</div>
	
	
	<div class="form-group">
		<div class="form-tit">
			<label for="select_name3">레이블</label>
		</div>
		<div class="form-conts">
			<select id="select_name3" class="krds-form-select" title="선택" disabled>
				<option value="">disabled</option>
				<option value="">항목2</option>
				<option value="">항목3</option>
				<option value="">항목4</option>
			</select>
		</div>
		<p class="form-hint">도움말</p>
	</div>
	
</div>
</template>

<script setup lang="ts">
// 셀렉트 컴포넌트
// 드롭다운 선택 필드입니다.

import { ref } from 'vue'

// 필요한 상태 및 메서드 정의
const isActive = ref(false)

const handleClick = () => {
  isActive.value = !isActive.value
}
</script>