nextjs-framework
  • nextjs-sj-prime-base
  • Getting Started
    • Quickstart
    • Project Structure
    • Code Convention
  • 신규 프로젝트 생성 가이드
  • 라이브러리 개발 및 배포
  • # 고고컴퍼니 어드민 개발 서버 배포
  • Port 설정 방법
  • 에러 해결 방법
  • StoryBook 설명
  • COMPONENTS/UI
    • Tooltip
    • CompactIconButton
    • IconButton
    • FormAsset
    • InputField
    • Dropzone
    • Select
    • DataTable
    • TableHead
    • TableHeadDropdownMenu
    • TableCell
    • TableCellSelect
    • Tag
    • Tabs
    • Chip
    • Command
    • FilterSelect
    • FilterMultiSelect
    • FilterDate
    • DatePicker
    • Toast
  • Timer
  • Components/layout
    • page-header
    • info-card
    • search-filter
    • table-header
    • form
  • Custom Hook
    • use-form
  • use-form-file
  • use-timer
  • Util
    • validation
    • middleware.ts
  • Components/미사용
    • input-box
    • single-select
    • multi-select
    • range-date-picker
    • radio-button-group
    • checkbox-group
    • list-table
    • pagination
    • toggle
Powered by GitBook
On this page
  1. COMPONENTS/UI

FilterSelect

PreviousCommandNextFilterMultiSelect

Last updated 1 month ago

Prop
Type
Default
Description

label

string

-

라벨 텍스트

size

'medium' | 'small'

'medium'

사이즈

placeholder

string

-

플레이스 홀더

defaultValue

string

-

기본 선택 값

onChange

function

-

값 선택 핸들러

options

{ value: string label: string }[]

-

옵션 데이터 value: 선택 값 label: 라벨 값

variant

'default' | 'select' | 'checkbox' | 'toggle'

'select'

타입

showHeading

string

-

헤딩 텍스트 노출 여부

headingText

string

-

헤딩 텍스트

showButton

boolean

-

버튼 노출 여부

buttonText

string

-

버튼 텍스트

onButtonClick

function

-

버튼 클릭 이밴트 핸들러

accentColor

string

-

강조 색상

hoverColor

string

-

호버 색상

icon

React.ReactNode

-

라벨 아이콘

itemIcon

React.ReactNode

-

옵션 라벨 아이콘

description

string

-

설명글

showSearch

boolean

-

검색창 노출 여부

Usage

<FilterSelect
  label={'라벨'}
  size={'large'}
  placeholder={'선택'}
  defaultValue={'value01'}
  onChange={() => {}}
  options={[
    {
      value: 'value01',
      label: '셀렉트 아이템',
    },
    {
      value: 'value02',
      label: '셀렉트 아이템',
    },
    {
      value: 'value03',
      label: '셀렉트 아이템',
    },
  ]}
  variant={'select'}
  showHeading
  headingText={'Heading'}
  showButton
  buttonText={'검색'}
  onButtonClick={() => {}}
  description={'보조적인 설명이 필요할 때 사용하는 헬퍼 메시지입니다.'}
  showSearch
/>