'). | | `openOnHover` | `false`, `true` | `false` | 트리거에 마우스를 올려놓았을 때 메뉴도 열려야 하는지 여부입니다. | | `delay` | `number` | `100` | 메뉴가 열리기 전에 기다리는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` prop이 필요합니다. | | `closeDelay` | `number` | `0` | 마우스가 떠났을 때 메뉴가 닫히기까지 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` prop이 필요합니다. | ### Menu.PositionerPrimitive | Prop | Type | Default | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 집중할 요소를 결정합니다.
- `false`: 초점을 움직이지 마세요.
- `true`: 기본 동작(트리거 또는 이전에 집중된 요소)에 따라 초점을 이동합니다.
- `RefObject`: 초점을 참조 요소로 이동합니다.
- `기능`: 상호작용 유형(`마우스`, `터치`, `펜` 또는 `키보드`)으로 호출됩니다.
요소를 초점 맞추기 위해 `참`을, 기본 동작을 사용하기 위해 `참`을, 아무것도 하지 않기 위해 `거짓`/`정의되지 않음`을 반환합니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | #### Menu.PortalPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 팝업이 숨겨진 상태에서 포털을 DOM에 마운트할지 여부. | | `container` | `null`, `HTMLElement`, `ShadowRoot`, `RefObject` | - | 포털 요소를 렌더링하기 위해 상위 요소입니다. | #### Menu.PositionerPrimitive | Prop | Type | Default | Description | | -------------------- | --------------------------------------------------------------------------------------------------------------------------------- | -------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `sticky` | `false`, `true` | `false` | 앵커 요소가 뷰포트에서 스크롤되어 사라진 후에도 팝업을 뷰포트 내에 유지할지 여부입니다. | | `anchor` | `null`, `Element`, `VirtualElement`, `RefObject`, `() => Element \| VirtualElement \| null` | - | 팝업을 위치시킬 요소입니다.
기본적으로 팝업은 트리거를 기준으로 위치합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `align` | `center`, `end`, `start` | `center` | 팝업을 지정된 측면에 상대적으로 정렬하는 방법입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `positionMethod` | `absolute`, `fixed` | `absolute` | 어떤 CSS `위치` 속성을 사용할지 결정합니다. | | `side` | `bottom`, `left`, `right`, `top`, `inline-end`, `inline-start` | `bottom` | Anchor 요소의 어느 쪽에 팝업을 정렬할지 결정합니다.
충돌을 피하기 위해 자동으로 변경될 수 있습니다. | | `sideOffset` | `number`, `OffsetFunction` | `0` | 앵커와 팝업 사이의 거리(픽셀 단위).
또한 앵커의 치수를 읽기 위해 거리를 반환하는 기능도 허용합니다
포지셔너 요소와 그 측면 및 정렬.
함수는 다음 속성을 가진 '데이터' 객체 매개변수를 가져옵니다:
- 'data.anchor': '폭'과 '높이' 속성을 가진 앵커 요소의 치수.
- 'data.positioner': '폭'과 '높이' 속성을 가진 위치 요소의 치수.
- 'data.side': 포지셔너가 앵커 요소의 어느 쪽에 정렬되어 있는지를 나타냅니다.
- 'data.align': 지정된 변에 대해 위치 지정자가 정렬되는 방식. | | `alignOffset` | `number`, `OffsetFunction` | `0` | 정렬 축을 따라 추가 오프셋(픽셀 단위).
또한 오프셋을 반환하여 앵커의 치수를 읽는 기능도 허용합니다
포지셔너 요소와 그 측면 및 정렬.
함수는 다음 속성을 가진 '데이터' 객체 매개변수를 가져옵니다:
- 'data.anchor': '폭'과 '높이' 속성을 가진 앵커 요소의 치수.
- 'data.positioner': '폭'과 '높이' 속성을 가진 위치 요소의 치수.
- 'data.side': 포지셔너가 앵커 요소의 어느 쪽에 정렬되어 있는지를 나타냅니다.
- 'data.align': 지정된 변에 대해 위치 지정자가 정렬되는 방식. | | `collisionBoundary` | `Element`, `clipping-ancestors`, `Element[]`, `{ x: number; y: number; height: number; width: number; }` | `clipping-ancestors` | 팝업이 제한되는 영역을 구분하는 요소 또는 사각형입니다. | | `collisionPadding` | `number`, `{ bottom?: number \| undefined; left?: number \| undefined; right?: number \| undefined; top?: number \| undefined; }` | `5` | 충돌 경계의 가장자리에서 유지할 추가 공간입니다. | | `arrowPadding` | `number` | `5` | 화살표와 팝업 가장자리 사이에 유지할 최소 거리입니다.

화살표 요소가 팝업의 둥근 모서리 밖으로 튀어나오는 것을 방지하는 데 사용합니다. | | `trackAnchor` | `false`, `true` | `true` | 팝업이 위치 지정 앵커의 레이아웃 이동을 추적하는지 여부입니다. | | `collisionAvoidance` | `SideFlipMode`, `SideShiftMode` | - | 팝업을 위치 지정할 때 충돌을 처리하는 방법을 결정합니다. | #### Menu.PopupPrimitive | Prop | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스를 이동할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작(트리거 또는 이전에 포커스된 요소)을 기준으로 포커스를 이동합니다.
- `RefObject`: 참조 요소로 포커스를 이동합니다.
- `function`: 상호작용 유형(`mouse`, `touch`, `pen`, 또는 `keyboard`)과 함께 호출됩니다.
포커스를 이동할 요소를 반환하거나, 기본 동작을 사용하려면 `true`, 아무 작업도 하지 않으려면 `false` 또는 `undefined`를 반환합니다. | ### Menu.CheckboxItemIndicatorPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ----------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중에 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목에 대한 클릭 핸들러입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | 컴포넌트가 `render` 속성을 통해 대체될 때 네이티브 `<button>` 요소를 렌더링할지 여부입니다.
렌더링된 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | `true` | 항목이 클릭될 때 메뉴를 닫을지 여부입니다. | ### Menu.RadioItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------------ | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `orientation` | `horizontal`, `vertical` | `horizontal` | 구분자의 방향입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Menu.Group | Prop | Type | Default | Description | | ----------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | 컴포넌트의 내용입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Menu.GroupLabel | Prop | Type | Default | Description | | ----------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | ### Menu.SubmenuRoot | Prop | Type | Default | Description | | ---------------------- | -------------------------------------------------------------------------------------------------------------- | ---------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `orientation` | `horizontal`, `vertical` | `vertical` | 메뉴의 시각적 방향.
회전 초점이 위쪽/아래쪽 화살표 키를 사용하는지 왼쪽/오른쪽 화살표 키를 사용하는지 제어합니다. | | **children** | `undefined`, `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `loop` | `false`, `true` | `true` | 키보드 포커스를 화살표 키를 사용하여 목록 끝에 도달했을 때 첫 번째 항목으로 다시 루프할지 여부입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시해야 하는지 여부입니다. | | `open` | `false`, `true` | - | 메뉴가 현재 열려 있는지 여부입니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `defaultOpen` | `false`, `true` | `false` | 메뉴가 처음에 열려 있는지 여부입니다.

제어되는 메뉴를 렌더링하려면 대신 `open` 속성을 사용하세요. | | `onOpenChange` | `(open: boolean, eventDetails: ChangeEventDetails) => void` | - | 메뉴가 열리거나 닫힐 때 호출되는 이벤트 핸들러입니다. | | `onOpenChangeComplete` | `(open: boolean) => void` | - | 메뉴가 닫힐 때 애니메이션이 완료된 후 호출되는 이벤트 핸들러입니다. | | `delay` | `number` | `100` | 메뉴가 호버될 때 열리기 전에 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` 속성이 필요합니다. | | `closeDelay` | `number` | `0` | 메뉴가 호버되어 열렸을 때 닫히기 전에 대기하는 시간입니다. 밀리초 단위로 지정합니다.

`openOnHover` 속성이 필요합니다. | | `openOnHover` | `false`, `true` | `true` | 서브메뉴가 트리거에 마우스를 올렸을 때 열릴지 여부입니다. | | `actionsRef` | `RefObject` | - | 명령적 행동에 대한 참조.
- `unmount`: 지정되면 메뉴를 닫았을 때 언마운트되지 않습니다.
대신 메뉴를 수동으로 마운트 해제하려면 'unmount' 기능을 호출해야 합니다.
메뉴의 애니메이션이 외부 라이브러리에 의해 제어될 때 유용합니다.
- `close`: 지정하면 메뉴를 긴급하게 닫을 수 있습니다. | ### Menu.SubmenuTriggerItem | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | --------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | 구성 요소가 교체할 때 네이티브 `<button>` 요소를 렌더링하는지 여부
`render` 소품을 통해.
렌더링된 요소가 네이티브 버튼인 경우 `true`로 설정합니다. | ### Menu.SubmenuPopup | Prop | Type | Default | Description | | ------------------- | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스를 이동할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다 (트리거 또는 이전에 포커스된 요소).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, `true`를 반환하여 기본 동작을 사용하거나, `false`/`undefined`를 반환하여 아무 작업도 수행하지 않습니다. | | `portalElement` | `ReactElement` | - | | | `positionerElement` | `ReactElement` | - | | #### Menu.SubmenuPopupPrimitive | Prop | Type | Default | Description | | ------------ | --------------------------------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `finalFocus` | `false`, `true`, `RefObject`, `(closeType: InteractionType) => boolean \| void \| HTMLElement \| null` | - | 메뉴가 닫힐 때 포커스할 요소를 결정합니다.

- `false`: 포커스를 이동하지 않습니다.
- `true`: 기본 동작에 따라 포커스를 이동합니다(트리거 또는 이전에 포커스된 요소).
- `RefObject`: ref 요소로 포커스를 이동합니다.
- `function`: 인터랙션 타입(`mouse`, `touch`, `pen`, 또는 `keyboard`)과 함께 호출됩니다.
포커스할 요소를 반환하거나, 기본 동작을 사용하려면 `true`를, 아무 작업도 하지 않으려면 `false`/`undefined`를 반환합니다. | ### Menu.CheckboxItem | Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `defaultChecked` | `false`, `true` | `false` | 체크박스 항목이 초기에 선택되어 있는지 여부입니다.

제어 컴포넌트로 렌더링하려면 `checked` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `checked` | `false`, `true` | - | 체크박스 항목이 현재 선택되어 있는지 여부입니다.

비제어 컴포넌트로 렌더링하려면 `defaultChecked` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | `false` | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | | `onCheckedChange` | `(checked: boolean, eventDetails: ChangeEventDetails) => void` | - | 체크박스 항목이 선택되거나 선택 해제될 때 호출되는 이벤트 핸들러입니다. | #### Menu.CheckboxItemPrimitive | Prop | Type | Default | Description | | ----------------- | -------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `defaultChecked` | `false`, `true` | `false` | 체크박스 항목이 초기에 선택되어 있는지 여부입니다.

제어 컴포넌트로 렌더링하려면 `checked` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `checked` | `false`, `true` | - | 체크박스 항목이 현재 선택되어 있는지 여부입니다.

비제어 컴포넌트로 렌더링하려면 `defaultChecked` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | `false` | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | | `onCheckedChange` | `(checked: boolean, eventDetails: ChangeEventDetails) => void` | - | 체크박스 항목이 선택되거나 선택 해제될 때 호출되는 이벤트 핸들러입니다. | #### Menu.CheckboxItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 체크박스 항목이 선택되지 않았을 때 HTML 요소를 DOM에 유지할지 여부입니다. | ### Menu.RadioGroup | Prop | Type | Default | Description | | --------------- | ------------------------------------------------------------------------------------------------- | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | 컴포넌트의 콘텐츠입니다. | | `defaultValue` | `any` | - | 초기에 선택되어야 하는 라디오 항목의 비제어 값입니다.

제어 컴포넌트로 렌더링하려면 `value` prop을 대신 사용하세요. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | `value` | `any` | - | 현재 선택되어야 하는 라디오 항목의 제어 값입니다.

비제어 컴포넌트로 렌더링하려면 `defaultValue` prop을 대신 사용하세요. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `onValueChange` | `(value: any, eventDetails: ChangeEventDetails) => void` | - | 선택된 값이 변경될 때 호출되는 함수입니다. | ### Menu.RadioItem | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | **value** | `any` | - | 라디오 항목의 값입니다.
이 값은 항목이 선택될 때 MenuRadioGroup에 설정됩니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | - | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | #### Menu.RadioItemPrimitive | Prop | Type | Default | Description | | -------------- | ------------------------------------------------------------------------------------------------- | ------- | ------------------------------------------------------------------------------------------------------------------- | | `label` | `string` | - | 키보드 텍스트 탐색 중 항목이 일치할 때 사용할 텍스트 레이블을 재정의합니다. | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `id` | `string` | - | | | `children` | `null`, `string`, `number`, `false`, `true`, `ReactElement`, `Iterable`, `ReactPortal` | - | | | `onClick` | `MouseEventHandler` | - | 메뉴 항목의 클릭 핸들러입니다. | | `disabled` | `false`, `true` | `false` | 컴포넌트가 사용자 상호작용을 무시할지 여부입니다. | | **value** | `any` | - | 라디오 항목의 값입니다.
이 값은 항목이 선택될 때 MenuRadioGroup에 설정됩니다. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `nativeButton` | `false`, `true` | `false` | `render` prop을 통해 요소를 교체할 때 컴포넌트가 네이티브 `<button>` 요소로 렌더링되는지 여부입니다.
렌더링되는 요소가 네이티브 버튼인 경우 `true`로 설정하세요. | | `closeOnClick` | `false`, `true` | - | 항목을 클릭했을 때 메뉴를 닫을지 여부입니다. | #### Menu.RadioItemIndicatorPrimitive | Prop | Type | Default | Description | | ------------- | ------------------------------------ | ------- | ---------------------------------------------------------------------------------------------- | | `className` | `string`, `(state: State) => string` | - | 요소에 적용된 CSS 클래스 또는 컴포넌트의 상태에 따라 클래스를 반환하는 함수. | | `render` | `ReactElement` | - | 컴포넌트의 HTML 요소를 다른 태그로 대체하거나 다른 컴포넌트와 조합할 수 있습니다. 렌더링할 요소를 반환하는 `ReactElement` 또는 함수를 인수로 받습니다. | | `keepMounted` | `false`, `true` | `false` | 라디오 항목이 비활성화되어 있을 때 HTML 요소를 DOM에 유지할지 여부입니다. | # MultiSelect URL: /docs/components/multi-select Source: https://raw.githubusercontent.com/goorm-dev/vapor-ui/refs/heads/main/apps/website/content/docs/components/(components)/multi-select.mdx MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다. *** title: 'MultiSelect' site\_name: 'MultiSelect - Vapor Core' description: 'MultiSelect는 사용자가 여러 옵션 중에서 다중 선택할 수 있는 드롭다운 컴포넌트입니다. 선택된 값들은 배지 형태로 표시되며, 태그 선택, 필터링, 카테고리 선택 등에 사용됩니다.' ----------------------------------------------------------------------------------------------------------------------- ```tsx import { MultiSelect } from '@vapor-ui/core'; const fonts = [ { label: 'Sans-serif', value: 'sans' }, { label: 'Serif', value: 'serif' }, { label: 'Monospace', value: 'mono' }, { label: 'Cursive', value: 'cursive' }, ]; export default function DefaultMultiSelect() { return ( {fonts.map((font) => ( {font.label} ))} ); } ``` ## Property *** ### Size MultiSelect의 크기를 설정합니다. ```tsx import { HStack, MultiSelect, Text, VStack } from '@vapor-ui/core'; const options = [ { label: '옵션 1', value: 'option1' }, { label: '옵션 2', value: 'option2' }, { label: '옵션 3', value: 'option3' }, ]; export default function MultiSelectSize() { return ( sm md lg xl ); } const MultiSelectTemplate = (props: MultiSelect.Root.Props) => { return ( {options.map((option) => ( {option.label} ))} ); }; ``` ### Controlled State MultiSelect의 선택 상태를 제어합니다. ```tsx 'use client'; import { useState } from 'react'; import { Button, HStack, MultiSelect, Text, VStack } from '@vapor-ui/core'; const fonts = [ { label: 'Sans-serif', value: 'sans' }, { label: 'Serif', value: 'serif' }, { label: 'Monospace', value: 'mono' }, { label: 'Cursive', value: 'cursive' }, ]; export default function MultiSelectControlled() { const [value, setValue] = useState([]); const handleValueChange = (newValue: unknown) => { setValue(newValue as string[]); }; return ( {fonts.map((font) => ( {font.label} ))} 선택된 값:{' '}


                      {value.length > 0 ? value.join(', ') : '없음'}

기본 상태와 비활성화 상태

현재 페이지와 비활성화 상태

현재 페이지 표시

아이콘과 텍스트 조합

아이콘만 사용

세로 방향에서의 아이콘

선택된 상태 표시

포커스 시 활성화 `(activateOnFocus: true)`

엔터/스페이스로 활성화 `(activateOnFocus: false)`

비순환 내비게이션 `(loopFocus: false)`