Dates@knitui/dates

AmPmInput

The controlled am/pm leaf the composed TimePicker pairs with SpinInput in 12h mode. On web it is a text field driven by letter entry (a/p) and an Arrow/Home/End/Backspace keyboard machine; on native it is a non-editable tap-to-toggle segment (no soft keyboard). Built on a single kit Input — never a raw <select>/<input>.

WebiOSAndroid8 style slots7 own props6 examples

Stories Source Tests Open in Storybook

import { AmPmInput } from "@knitui/dates";

Playground

Loading playground…

focusableWhether the field is in the tab order.

true

readOnlyWhether the field rejects edits.

false

disabledWhether the field is disabled.

false

Playground

<AmPmInput
  focusable
/>

Examples

Default

Default empty segment, showing the -- placeholder.

Loading example…

DefaultSource Storybook

Filled

A pre-selected value.

Loading example…

FilledSource Storybook

Read Only

Read-only — edits and keyboard input are rejected.

Loading example…

Read OnlySource Storybook

Disabled

Disabled — dimmed and non-interactive.

Loading example…

DisabledSource Storybook

Localized

Localized labels — typed first letters match the localized strings (vm/nm).

Loading example…

LocalizedSource Storybook

Props

Prop	Type	Default	Description
`focusable` required	`boolean`	`true`	Whether the field is in the tab order.
`labels` required	`TimePickerAmPmLabels`	—	Localized am/pm labels matched against typed first letters.
`onChange` required	`(value: string) => void`	—	Called when the segment changes (cleared → `''`).
`value` required	`string`	—	Current am/pm label, or `''` when empty.
`disabled` system	`boolean \| undefined`	—	Whether the field is disabled.
`onNextInput`	`(() => void) \| undefined`	—	Advance focus to the next segment (after a letter sets am/pm, ArrowRight).
`onPreviousInput`	`(() => void) \| undefined`	—	Return focus to the previous segment (Backspace when empty / ArrowLeft).
`radius` system	`string \| number \| undefined`	—	Key of theme radius or a valid CSS value to set border-radius
`readOnly`	`boolean \| undefined`	—	Whether the field rejects edits.
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`InputSize \| undefined`	`"sm"`	Controls input height, horizontal padding, and font-size
`styles` system	`SlotStyles<InputWrapperSlots> \| undefined`	—	Uniform per-slot style passthrough — sugar over the composable parts. The `Input` host consumes the adornment slots (`root`/`leftSection`/`rightSection`); the field-chrome slots (`wrapper`/`label`/`description`/`error`/`required`) are consumed by `Input.Wrapper`. Forwarding the same map to both is safe — each applies only the slots it owns.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`variant` system	`InputVariant \| undefined`	`"default"`	Visual variant

Style slots

Every part of AmPmInput can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`description`	`styles={{ description: { … } }}`
`error`	`styles={{ error: { … } }}`
`label`	`styles={{ label: { … } }}`
`leftSection`	`styles={{ leftSection: { … } }}`
`required`	`styles={{ required: { … } }}`
`rightSection`	`styles={{ rightSection: { … } }}`
`root`	`styles={{ root: { … } }}`
`wrapper`	`styles={{ wrapper: { … } }}`

Accessibility & DOM props (280)

Prop	Type
`about`	`string \| undefined`
`accept`	`string \| undefined`
`accessKey`	`string \| undefined`
`alt`	`string \| undefined`
`aria-activedescendant`	`string \| undefined`
`aria-atomic`	`(boolean \| "true" \| "false") \| undefined`
`aria-autocomplete`	`"list" \| "none" \| "inline" \| "both" \| undefined`
`aria-braillelabel`	`string \| undefined`
`aria-brailleroledescription`	`string \| undefined`
`aria-busy`	`(boolean \| "true" \| "false") \| undefined`
`aria-checked`	`boolean \| "true" \| "false" \| "mixed" \| undefined`
`aria-colcount`	`number \| undefined`
`aria-colindex`	`number \| undefined`
`aria-colindextext`	`string \| undefined`
`aria-colspan`	`number \| undefined`
`aria-controls`	`string \| undefined`
`aria-current`	`boolean \| "step" \| "true" \| "false" \| "time" \| "page" \| "location" \| "date" \| undefined`
`aria-describedby`	`string \| undefined`
`aria-description`	`string \| undefined`
`aria-details`	`string \| undefined`
`aria-disabled`	`(boolean \| "true" \| "false") \| undefined`
`aria-dropeffect`	`"link" \| "none" \| "copy" \| "move" \| "execute" \| "popup" \| undefined`
`aria-errormessage`	`string \| undefined`
`aria-expanded`	`(boolean \| "true" \| "false") \| undefined`
`aria-flowto`	`string \| undefined`
`aria-grabbed`	`(boolean \| "true" \| "false") \| undefined`
`aria-haspopup`	`boolean \| "true" \| "false" \| "dialog" \| "grid" \| "menu" \| "tree" \| "listbox" \| undefined`
`aria-hidden`	`(boolean \| "true" \| "false") \| undefined`
`aria-invalid`	`boolean \| "true" \| "false" \| "grammar" \| "spelling" \| undefined`
`aria-keyshortcuts`	`string \| undefined`
`aria-label`	`string \| undefined`
`aria-labelledby`	`string \| undefined`
`aria-level`	`number \| undefined`
`aria-live`	`"polite" \| "assertive" \| "off" \| undefined`
`aria-modal`	`(boolean \| "true" \| "false") \| undefined`
`aria-multiline`	`(boolean \| "true" \| "false") \| undefined`
`aria-multiselectable`	`(boolean \| "true" \| "false") \| undefined`
`aria-orientation`	`"horizontal" \| "vertical" \| undefined`
`aria-owns`	`string \| undefined`
`aria-placeholder`	`string \| undefined`
`aria-posinset`	`number \| undefined`
`aria-pressed`	`boolean \| "true" \| "false" \| "mixed" \| undefined`
`aria-readonly`	`(boolean \| "true" \| "false") \| undefined`
`aria-relevant`	`"text" \| "all" \| "additions" \| "additions removals" \| "additions text" \| "removals" \| "removals additions" \| "removals text" \| "text additions" \| "text removals" \| undefined`
`aria-required`	`(boolean \| "true" \| "false") \| undefined`
`aria-roledescription`	`string \| undefined`
`aria-rowcount`	`number \| undefined`
`aria-rowindex`	`number \| undefined`
`aria-rowindextext`	`string \| undefined`
`aria-rowspan`	`number \| undefined`
`aria-selected`	`(boolean \| "true" \| "false") \| undefined`
`aria-setsize`	`number \| undefined`
`aria-sort`	`"none" \| "ascending" \| "descending" \| "other" \| undefined`
`aria-valuemax`	`number \| undefined`
`aria-valuemin`	`number \| undefined`
`aria-valuenow`	`number \| undefined`
`aria-valuetext`	`string \| undefined`
`autoSave`	`string \| undefined`
`capture`	`boolean \| "user" \| "environment" \| undefined`
`checked`	`boolean \| undefined`
`content`	`string \| undefined`
`contentEditable`	`"inherit" \| (boolean \| "true" \| "false") \| "plaintext-only" \| undefined`
`contextMenu`	`string \| undefined`
`dangerouslySetInnerHTML`	`{ __html: string \| TrustedHTML; } \| undefined`
`datatype`	`string \| undefined`
`defaultChecked`	`boolean \| undefined`
`dir`	`string \| undefined`
`draggable`	`(boolean \| "true" \| "false") \| undefined`
`exportparts`	`string \| undefined`
`form`	`string \| undefined`
`formAction`	`string \| ((formData: FormData) => void \| Promise<void>) \| undefined`
`formEncType`	`string \| undefined`
`formMethod`	`string \| undefined`
`formNoValidate`	`boolean \| undefined`
`formTarget`	`string \| undefined`
`height`	`string \| number \| undefined`
`hidden`	`boolean \| undefined`
`inert`	`boolean \| undefined`
`inlist`	`any`
`inputMode`	`"text" \| "none" \| "search" \| "tel" \| "url" \| "email" \| "numeric" \| "decimal" \| undefined`
`is`	`string \| undefined`
`itemID`	`string \| undefined`
`itemProp`	`string \| undefined`
`itemRef`	`string \| undefined`
`itemScope`	`boolean \| undefined`
`itemType`	`string \| undefined`
`key`	`Key \| null \| undefined`
`lang`	`string \| undefined`
`list`	`string \| undefined`
`nonce`	`string \| undefined`
`onAbort`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onAbortCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onAnimationEnd`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationEndCapture`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationIteration`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationIterationCapture`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationStart`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAnimationStartCapture`	`AnimationEventHandler<HTMLInputElement> \| undefined`
`onAuxClick`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onAuxClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onBeforeInput`	`InputEventHandler<HTMLInputElement> \| undefined`
`onBeforeInputCapture`	`InputEventHandler<HTMLInputElement> \| undefined`
`onBeforeToggle`	`ToggleEventHandler<HTMLInputElement> \| undefined`
`onBlur`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onBlurCapture`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onCanPlay`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onCanPlayCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onCanPlayThrough`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onCanPlayThroughCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onChangeCapture`	`ChangeEventHandler<HTMLInputElement, Element> \| undefined`
`onClick`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onCompositionEnd`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionEndCapture`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionStart`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionStartCapture`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionUpdate`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onCompositionUpdateCapture`	`CompositionEventHandler<HTMLInputElement> \| undefined`
`onContextMenu`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onContextMenuCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onCopy`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCopyCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCut`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onCutCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onDoubleClick`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onDoubleClickCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onDrag`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnd`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEndCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnter`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragEnterCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragExit`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragExitCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragLeave`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragLeaveCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragOver`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragOverCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragStart`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDragStartCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDrop`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDropCapture`	`DragEventHandler<HTMLInputElement> \| undefined`
`onDurationChange`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onDurationChangeCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEmptied`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEmptiedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEncrypted`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEncryptedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEnded`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onEndedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onError`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onErrorCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onFocus`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onFocusCapture`	`FocusEventHandler<HTMLInputElement> \| undefined`
`onGotPointerCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onGotPointerCaptureCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onInputCapture`	`InputEventHandler<HTMLInputElement> \| undefined`
`onInvalid`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onInvalidCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onKeyDownCapture`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyPress`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyPressCapture`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyUp`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onKeyUpCapture`	`KeyboardEventHandler<HTMLInputElement> \| undefined`
`onLoad`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedData`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedDataCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedMetadata`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadedMetadataCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadStart`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLoadStartCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onLostPointerCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onLostPointerCaptureCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onMouseDown`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseDownCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseEnter`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseLeave`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseMove`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseMoveCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOut`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOutCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOver`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseOverCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseUp`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onMouseUpCapture`	`MouseEventHandler<HTMLInputElement> \| undefined`
`onPaste`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onPasteCapture`	`ClipboardEventHandler<HTMLInputElement> \| undefined`
`onPause`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPauseCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlay`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlayCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlaying`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPlayingCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onPointerCancel`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerCancelCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerDown`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerDownCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerEnter`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerLeave`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerMove`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerMoveCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOut`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOutCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOver`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerOverCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerUp`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onPointerUpCapture`	`PointerEventHandler<HTMLInputElement> \| undefined`
`onProgress`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onProgressCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onRateChange`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onRateChangeCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onReset`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onResetCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onScroll`	`UIEventHandler<HTMLInputElement> \| undefined`
`onScrollCapture`	`UIEventHandler<HTMLInputElement> \| undefined`
`onScrollEnd`	`UIEventHandler<HTMLInputElement> \| undefined`
`onScrollEndCapture`	`UIEventHandler<HTMLInputElement> \| undefined`
`onSeeked`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSeekedCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSeeking`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSeekingCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSelect`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSelectCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onStalled`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onStalledCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSubmit`	`SubmitEventHandler<HTMLInputElement> \| undefined`
`onSubmitCapture`	`SubmitEventHandler<HTMLInputElement> \| undefined`
`onSuspend`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onSuspendCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onTimeUpdate`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onTimeUpdateCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onToggle`	`ToggleEventHandler<HTMLInputElement> \| undefined`
`onTouchCancel`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchCancelCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchEnd`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchEndCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchMove`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchMoveCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchStart`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTouchStartCapture`	`TouchEventHandler<HTMLInputElement> \| undefined`
`onTransitionCancel`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionCancelCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionEnd`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionEndCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionRun`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionRunCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionStart`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onTransitionStartCapture`	`TransitionEventHandler<HTMLInputElement> \| undefined`
`onVolumeChange`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onVolumeChangeCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onWaiting`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onWaitingCapture`	`ReactEventHandler<HTMLInputElement> \| undefined`
`onWheel`	`WheelEventHandler<HTMLInputElement> \| undefined`
`onWheelCapture`	`WheelEventHandler<HTMLInputElement> \| undefined`
`part`	`string \| undefined`
`popover`	`"" \| "auto" \| "manual" \| "hint" \| undefined`
`popoverTarget`	`string \| undefined`
`popoverTargetAction`	`"hide" \| "show" \| "toggle" \| undefined`
`prefix`	`string \| undefined`
`property`	`string \| undefined`
`radioGroup`	`string \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`
`rel`	`string \| undefined`
`resource`	`string \| undefined`
`results`	`number \| undefined`
`rev`	`string \| undefined`
`role`	`AriaRole \| undefined`
`security`	`string \| undefined`
`slot`	`string \| undefined`
`src`	`string \| undefined`
`suppressContentEditableWarning`	`boolean \| undefined`
`suppressHydrationWarning`	`boolean \| undefined`
`tabIndex`	`number \| undefined`
`title`	`string \| undefined`
`translate`	`"yes" \| "no" \| undefined`
`typeof`	`string \| undefined`
`unselectable`	`"off" \| "on" \| undefined`
`vocab`	`string \| undefined`
`width`	`string \| number \| undefined`

Plus 511 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.