Select

Exports

@mbsw/ui에서 가져올 수 있는 항목입니다.

Select

SelectContent

SelectGroup

SelectItem

SelectItemIndicator

SelectTrigger

SelectValue

Props

컴포넌트별 주요 속성입니다. 조건부 속성의 조합과 공통 HTML, Radix 속성은 아래 전체 타입에서 확인하세요.

SelectContent

SelectContent 속성
Prop	Type	필수 여부
`hasFinalSeparator`	`boolean`	선택

SelectItem

SelectItem 속성
Prop	Type	필수 여부
`leadingIcon`	`ReactNode`	선택
`size`	`'lg' \| 'md' \| 'sm' \| 'xs'`	선택

SelectTrigger

SelectTrigger 속성
Prop	Type	필수 여부
`leadingIcon`	`ReactNode`	선택
`size`	`'lg' \| 'md' \| 'sm' \| 'xs'`	선택

Type reference

전체 타입 보기

속성 조합과 상속 속성을 포함한 TypeScript 선언입니다.

import { type ComponentPropsWithoutRef, type ComponentRef, type ReactNode, type RefAttributes } from 'react';

import { Select as SelectPrimitive } from 'radix-ui';

export type SelectSize = 'lg' | 'md' | 'sm' | 'xs';

export type SelectProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Root>;

export type SelectValueProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Value>;

type SelectTriggerPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Trigger>, 'asChild'>;

export type SelectTriggerProps = SelectTriggerPrimitiveProps & {
    leadingIcon?: ReactNode;
    size?: SelectSize;
} & RefAttributes<ComponentRef<typeof SelectPrimitive.Trigger>>;

type SelectContentPrimitiveProps = ComponentPropsWithoutRef<typeof SelectPrimitive.Content>;

export type SelectContentProps = SelectContentPrimitiveProps & {
    hasFinalSeparator?: boolean;
} & RefAttributes<ComponentRef<typeof SelectPrimitive.Content>>;

type SelectItemPrimitiveProps = Omit<ComponentPropsWithoutRef<typeof SelectPrimitive.Item>, 'asChild'>;

export type SelectItemProps = SelectItemPrimitiveProps & {
    leadingIcon?: ReactNode;
    size?: SelectSize;
} & RefAttributes<ComponentRef<typeof SelectPrimitive.Item>>;

export type SelectItemIndicatorProps = ComponentPropsWithoutRef<typeof SelectPrimitive.ItemIndicator> & RefAttributes<ComponentRef<typeof SelectPrimitive.ItemIndicator>>;

export declare const Select: import("react").FC<SelectPrimitive.SelectProps>;

export declare const SelectGroup: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectGroupProps & RefAttributes<HTMLDivElement>>;

export declare const SelectValue: import("react").ForwardRefExoticComponent<SelectPrimitive.SelectValueProps & RefAttributes<HTMLSpanElement>>;

export declare function SelectTrigger(props: SelectTriggerProps): import("react").JSX.Element;

export declare function SelectContent({ align, alignOffset, avoidCollisions, children, className, hasFinalSeparator, onFocusCapture, onKeyDown, onPointerDownCapture, onPointerMove, position, ref, sideOffset, ...contentProps }: SelectContentProps): import("react").JSX.Element;

export declare const SelectItemIndicator: import("react").ForwardRefExoticComponent<Omit<SelectPrimitive.SelectItemIndicatorProps & RefAttributes<HTMLSpanElement>, "ref"> & RefAttributes<HTMLSpanElement>>;

export declare function SelectItem(props: SelectItemProps): import("react").JSX.Element;