HomeHomeDocsComponentsDesign
Sections
Get StartedComponentsDesignInstallationThemeFormsDark ModeRTL
Get Started
IntroductionInstallationcomponents.jsonテーマ設定
Input
ButtonButton GroupCalendarCheckboxColor PickerComboboxCopy ButtonDate PickerFieldInputInput GroupInput OTPRadio GroupSelectSliderSwitchTextareaTime PickerToggleToggle Group
Feedback
AlertAlert DialogSonnerToast
Navigation
BreadcrumbContext MenuDropdown MenuHover CardMenubarNavigation MenuPagination
Overlay
DialogDrawerPopoverSheetTooltip
Layout
AccordionAspect RatioCardCarouselCollapsibleResizableScroll AreaSeparatorSidebarTabs
Display
AvatarBadgeChartCode BlockData TableEmptyItemKbdLabelProgressQR CodeSkeletonSpinnerTableTimelineTweet CardTypography
Other
CommandDirectionFiltersKanbanMD ParserPhone InputScroll Mask
基本デザイン
タイポグラフィアイコンレイアウトリンクテキスト余白角の形状エレベーションモーション
Forms
React Hook FormTanStack FormFormisch
Installation
Dark mode
ダークモードNext.jsViteAstroRemixTanStack Start
RTL
RTLNext.jsViteTanStack Start
i18n
i18n
Ketyap UI
HomeDocsComponentsDesign
Sections
  • Get Started
  • Components
  • Design
  • Installation
  • Theme
  • Forms
  • Dark Mode
  • RTL
Get Started
  • Introduction
  • Installation
  • components.json
  • テーマ設定
Input
  • Button
  • Button Group
  • Calendar
  • Checkbox
  • Color Picker
  • Combobox
  • Copy Button
  • Date Picker
  • Field
  • Input
  • Input Group
  • Input OTP
  • Radio Group
  • Select
  • Slider
  • Switch
  • Textarea
  • Time Picker
  • Toggle
  • Toggle Group
Feedback
  • Alert
  • Alert Dialog
  • Sonner
  • Toast
Navigation
  • Breadcrumb
  • Context Menu
  • Dropdown Menu
  • Hover Card
  • Menubar
  • Navigation Menu
  • Pagination
Overlay
  • Dialog
  • Drawer
  • Popover
  • Sheet
  • Tooltip
Layout
  • Accordion
  • Aspect Ratio
  • Card
  • Carousel
  • Collapsible
  • Resizable
  • Scroll Area
  • Separator
  • Sidebar
  • Tabs
Display
  • Avatar
  • Badge
  • Chart
  • Code Block
  • Data Table
  • Empty
  • Item
  • Kbd
  • Label
  • Progress
  • QR Code
  • Skeleton
  • Spinner
  • Table
  • Timeline
  • Tweet Card
  • Typography
Other
  • Command
  • Direction
  • Filters
  • Kanban
  • MD Parser
  • Phone Input
  • Scroll Mask
基本デザイン
  • タイポグラフィ
  • アイコン
  • レイアウト
  • リンクテキスト
  • 余白
  • 角の形状
  • エレベーション
  • モーション
Forms
  • React Hook Form
  • TanStack Form
  • Formisch
Installation
    Dark mode
    • ダークモード
    • Next.js
    • Vite
    • Astro
    • Remix
    • TanStack Start
    RTL
    • RTL
    • Next.js
    • Vite
    • TanStack Start
    i18n
    • i18n

    Forms

    PreviousNext

    Ketyap UI のフォーム実装パターン。

    フレームワークを選択#

    フォームライブラリごとの実装例を確認できます。新しいフォームを作る時は、既存の入力・エラー・送信状態のパターンに合わせてください。

    React Hook Form

    TanStack Form

    Formisch

    React

    useActionState

    (準備中)

    モーションReact Hook Form

    On This Page

    フレームワークを選択
    Built by Ketyap. Source code is available on GitHub.