reopt design
DocsExploreTemplatesCanvasToolsPricing
Login
opt-uiopt-chartsopt-datagridopt-editoropt-calendaropt-filemanageropt-chatopt-shellbrandapp-ui
Overview205Core74Shells99Blocks32
KeyPadMenu
reopt designreopt design

A design system for the AI era

  • Docs
  • Pricing
  • Releases
  • About
  • Contact
  • Terms of Service
  • Privacy Policy

reopt Inc.Business registration no. 217-88-02453contact@reopt.ai

© 2026 reopt Inc. All rights reserved.

KeyPadMenu

Component

Choose visual options from tiles backed by native radio buttons and checkboxes for keyboard and screen reader access.

nav
Related docs
bun add @reopt-ai/opt-ui
Install and import
bash
bun add @reopt-ai/opt-ui
tsx
import { KeyPadMenu } from "@reopt-ai/opt-ui";

Live preview

Change the width and theme, then interact with the components.

100%

시각화 타입 (단일 선택)

시각화 타입

레이어 (다중 선택)

겹칠 레이어

KeyPadMenu

PropTypeDefaultDescription
itemsRequiredKeyPadItem[]—타일 목록
labelRequiredstring—그룹 레이블
selection"single" | "multiple""single"선택 모드. value·onValueChange의 형태를 결정
valuestring | string[]—선택된 id
onValueChange((next: string) => void) | ((next: string[]) => void)—선택 콜백. value의 형태를 그대로 받는다
columnsnumber | "auto""auto"행당 타일 수
size"sm" | "md""md"타일 크기
hideLabelbooleanfalse레전드 시각적 숨김
classNamestring—추가 CSS 클래스
View test results

테스트 커버리지

2026년 7월 9일

생성된 테스트 결과를 찾지 못했습니다.

KeyPadMenu 항목이 문서 메타에 연결되어 있지만 현재 생성 파일에는 없습니다.

테스트를 추가한 뒤 `bun run generate:test-results`를 실행하거나 `testDescribe` 매핑을 다시 확인하세요.

Related components

opt-ui

Tabs

Core

Organize tab panels with Root, TabList, Tab, and TabPanel components.

opt-ui

Menu

Core

Compose menu bars and individual menus with checkbox items, radio items, separators, and popovers.

opt-ui

Breadcrumb

Core

Show the current location and provide navigation through its hierarchy.

opt-ui

DropdownMenu

Core

Create a single-trigger dropdown with a convenient wrapper around Menu Core.

opt-ui

FieldToken

Core

Display field types with consistent glyphs and optional labels for strings, numbers, dates, IP addresses, and geographic data.

opt-ui

Facet

Core

Filter by field values while reading their counts and distribution bars. Show top values first and collapse the long tail.

PreviousInlineEditNextText