Dates@knitui/dates

PickerInputBase

PickerInputBase is the shared TRIGGER CHROME every *PickerInput (DatePickerInput/MonthPickerInput/YearPickerInput) wraps. It renders an InputBase trigger (label/description/error/required + the formatted value or placeholder) and opens its inline-picker children in a Popover.Dropdown (default) or a centered Modal. In production dropdownOpened/dropdownHandlers are owned by useDatesInput; these stories wire them with useDisclosure. Per-slot styles (wrapper/input/dropdown) is sugar over the composed parts — explicit popoverProps/clearButtonProps/inline props beat it.

WebiOSAndroid3 style slots23 own props9 examples

Stories Source Tests Open in Storybook

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

Playground

Loading playground…

Playground

<PickerInputBase
  type="default"
  value={null}
  formattedValue={null}
  onClear={() => {}}
  shouldClear={false}
  label="Event date"
  placeholder="Pick a date"
  clearable={false}
  disabled={false}
  readOnly={false}
  required={false}
  dropdownType="popover"
  size="sm"
/>

Examples

Default

Empty trigger with a label + placeholder; press it to open the dropdown.

Loading example…

DefaultSource Storybook

With Value

A trigger displaying a formatted value.

Loading example…

With ValueSource Storybook

Full Chrome

Description + required + error chrome (delegated to InputBase).

Loading example…

Full ChromeSource Storybook

Clearable

Clearable — the clear button appears in the right section when a value is present.

Loading example…

ClearableSource Storybook

Disabled

Disabled trigger — the dropdown cannot open.

Loading example…

DisabledSource Storybook

Read Only

Read-only trigger — shows a value but cannot open the dropdown.

Loading example…

Read OnlySource Storybook

Modal Dropdown

dropdownType="modal" — same trigger, picker presented in a centered Modal.

Loading example…

Modal DropdownSource Storybook

Styles Slots

Per-slot styles sugar — tint the dropdown and pad the trigger via the slot map.

Loading example…

Styles SlotsSource Storybook

Props

Prop	Type	Default	Description
`children` required	`ReactNode`	—	The inline picker rendered inside the dropdown.
`dropdownHandlers` required	`UseDisclosureHandlers`	—	Open/close/toggle handlers for the dropdown (from `useDatesInput`/`useDisclosure`).
`dropdownOpened` required	`boolean`	—	Whether the dropdown is open (owned by `useDatesInput`).
`formattedValue` required	`string \| null \| undefined`	—	Value displayed in the trigger (placeholder shows when empty).
`onClear` required	`() => void`	—	Reset the value to empty (drives the clear button).
`shouldClear` required	`boolean`	—	Whether the clear button should be shown (a value is present and `clearable`).
`type` required	`"multiple" \| "default" \| "range"`	—	Picker selection mode.
`value` required	`DateValue \| DatesRangeValue \| DateValue[]`	—	Value forwarded to the hidden form field.
`clearable`	`boolean \| undefined`	`false`	Show a clear button in the right section when the field has a value.
`clearButtonProps`	`CloseButtonProps \| undefined`	—	Props passed to the clear button.
`description`	`ReactNode`	—	Description rendered below the label.
`disabled` system	`boolean \| undefined`	—	Disable the trigger.
`dropdownType`	`PickerInputDropdownType \| undefined`	`'popover'`	Whether the picker opens in a floating `Popover` or a centered `Modal`.
`error`	`ReactNode`	—	Error message / state.
`form`	`string \| undefined`	—	Associated `<form>` id forwarded to the hidden input.
`label`	`ReactNode`	—	Field label rendered above the trigger.
`modalProps`	`Partial<Omit<ModalProps, "children">> \| undefined`	—	Props passed to the `Modal` when `dropdownType="modal"` (ignored for the `popover` dropdown). Spread before the component's own `opened`/`onClose`/ `title`, so those always win; the `withCloseButton={false}` default is overridable via `modalProps.withCloseButton`.
`name`	`string \| undefined`	—	Form field name forwarded to the hidden input.
`onDropdownClose`	`(() => void) \| undefined`	—	Called when the dropdown closes, after the incomplete-range reset. Lets a wrapper run extra close-time logic (e.g. `DateTimePicker`'s min/max clamp).
`placeholder`	`string \| undefined`	—	Input placeholder shown when there is no value.
`popoverProps`	`Partial<Omit<PopoverProps, "children">> \| undefined`	—	Props passed to the `Popover`.
`readOnly`	`boolean \| undefined`	—	Prevent the value from being changed by the user (the dropdown stays closed).
`required`	`boolean \| undefined`	—	Mark the field as required (adds the asterisk to the label).
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`InputSize \| undefined`	`'sm'`	Trigger size (Input scale).
`styles` system	`SlotStyles<PickerInputBaseStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching composed part (`wrapper`/`input`/`dropdown`). Sits UNDER the explicit per-part props (`popoverProps`/`clearButtonProps`/inline trigger props), which always win.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`variant` system	`InputVariant \| undefined`	`'default'`	Visual variant of the input chrome (`default`/`filled`/`unstyled`).
`withTime`	`boolean \| undefined`	`false`	Serialize the hidden field value with time.

Style slots

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

Slot	Usage
`dropdown`	`styles={{ dropdown: { … } }}`
`input`	`styles={{ input: { … } }}`
`wrapper`	`styles={{ wrapper: { … } }}`

Accessibility & DOM props (2)

Prop	Type
`key`	`Key \| null \| undefined`
`ref`	`Ref<TamaguiElement> \| undefined`

Plus 496 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.