CoreSelectItem

Deprecated

이 컴포넌트는 더 이상 사용되지 않습니다. 대신 SelectPrim, MultiSelectPrim을 사용하세요.

Usage

기본 사용법

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="option-1">옵션 1</CoreSelect.Item>
	<CoreSelect.Item value="option-2">옵션 2</CoreSelect.Item>
	<CoreSelect.Item value="option-3">옵션 3</CoreSelect.Item>
</CoreSelect>;

Display Value 설정

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="option-1" displayValue="표시될 값">
		실제 내용
	</CoreSelect.Item>
	<CoreSelect.Item value="option-2" displayValue="Option 2">
		다른 내용
	</CoreSelect.Item>
</CoreSelect>;

Checkbox와 함께 사용

import { CoreSelect, CoreCheckbox } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="check-1">
		<CoreCheckbox label="옵션 1" />
	</CoreSelect.Item>
	<CoreSelect.Item value="check-2">
		<CoreCheckbox label="옵션 2" />
	</CoreSelect.Item>
</CoreSelect>;

Radio와 함께 사용

import { CoreSelect, CoreRadio } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="radio-1">
		<CoreRadio label="옵션 1" name="radio" />
	</CoreSelect.Item>
	<CoreSelect.Item value="radio-2">
		<CoreRadio label="옵션 2" name="radio" />
	</CoreSelect.Item>
</CoreSelect>;

Avatar와 함께 사용

import { CoreSelect, CoreCheckbox, CoreAvatar } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="avatar-1" displayValue="Option1">
		<CoreCheckbox
			label={
				<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
					<CoreAvatar size="sm" text="1" />
					Option1
				</div>
			}
		/>
	</CoreSelect.Item>
	<CoreSelect.Item value="avatar-2" displayValue="Option2">
		<CoreCheckbox
			label={
				<div style={{ display: 'flex', gap: '8px', alignItems: 'center' }}>
					<CoreAvatar size="sm" text="2" />
					Option2
				</div>
			}
		/>
	</CoreSelect.Item>
</CoreSelect>;

아이콘과 함께 사용

import { CoreSelect } from '@featuring-corp/components';
import { IconCalendarOutline } from '@featuring-corp/icons';

<CoreSelect>
	<CoreSelect.Item value="icon-1">
		<IconCalendarOutline />
		Option1
	</CoreSelect.Item>
	<CoreSelect.Item value="icon-2">
		<IconCalendarOutline />
		Option2
	</CoreSelect.Item>
</CoreSelect>;

비활성화

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="option-1">옵션 1</CoreSelect.Item>
	<CoreSelect.Item value="option-2" disabled>
		옵션 2 (비활성화)
	</CoreSelect.Item>
	<CoreSelect.Item value="option-3">옵션 3</CoreSelect.Item>
</CoreSelect>;

기본 선택

import { CoreSelect } from '@featuring-corp/components';

<CoreSelect>
	<CoreSelect.Item value="option-1" defaultChecked>
		옵션 1 (기본 선택)
	</CoreSelect.Item>
	<CoreSelect.Item value="option-2">옵션 2</CoreSelect.Item>
</CoreSelect>;

Props

ComponentPropsWithoutRef<'div'> 타입을 확장한 컴포넌트입니다.

Prop

Type

SizeType

CoreSelect을 참조하세요.

SelectedItem

Prop

Type

스타일

참고

이 컴포넌트는 deprecated되었습니다. 스타일 정보는 CoreSelect의 Dropdown Item 스타일을 참조하세요.

Dropdown Item:

display: flex
gap: spacing-150 (6px)
border-radius: radius-100
min-height: 28px

Size Variants

sm: typography: body[1], padding-y: spacing-50 (2px)
md: typography: body[2], padding-y: spacing-100 (4px)
lg: typography: body[2], padding-y: spacing-200 (8px)

States

Disabled (on): hover: cursor: not-allowed
Disabled (off): hover: background-color: primary[10], color: primary[100], cursor: pointer

On this page