Component field guide

Explore live variants, compare states, and learn every prop. Pick a component to start.

LIVE COMPONENT

WelkDateInput

A compact editable date field that opens the library's custom calendar rather than a browser date popup. It shares the DatePicker API and keyboard/date-selection behavior. Date values and bounds use YYYY-MM-DD; an empty string clears the value.

Launch date

YYYY-MM-DD

Usage

React / TSX

import { WelkDateInput } from "@welkui/react";

<WelkDateInput label="Launch date" defaultValue="2026-10-23" />

Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.

Variants and behavior

Compact popup calendar presentation. Use WelkDatePicker for a full visible calendar.

Visual variant gallery

These are real components, not screenshots. Compare their appearance and try the controls. Key props below each preview show what changes; use the usage example above for imports and component setup.

Empty

Type YYYY-MM-DD or choose a day using the custom calendar.

Choose a date

YYYY-MM-DD

Key propsdefaultValue=""

Preselected

Starts on a known date; selecting a day updates the field.

Selected launch

YYYY-MM-DD

Key propsdefaultValue="2026-10-23"

Bounded range

Only October 20-28, 2026 can be selected. Navigate the calendar to inspect disabled days.

Launch window

YYYY-MM-DD

Key propsmin="2026-10-20" max="2026-10-28"

Disabled

A visible value with selection and editing disabled.

Locked launch date

YYYY-MM-DD

Key propsdisabled defaultValue="2026-10-23"

Usage notes and accessibility

Use the compact input in forms where a full calendar would take too much space. Use WelkDatePicker when the calendar should remain visible.
Supply valid calendar dates in YYYY-MM-DD for value, defaultValue, min and max. These are date-only strings, not timezone-aware timestamps; avoid converting them through UTC unnecessarily.
Type directly or open the calendar to select a day. Escape dismisses the popup. Keep min at or before max and validate the submitted date in the application.

Props

Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.

WelkDateInput prop reference
Prop	Type	Default	Description
`label`	`ReactNode`	Required	Visible, accessible control label.
`value`	`string`	Uncontrolled	Controlled selection. Update it in onValueChange.
`defaultValue`	`string`	""	Initial value for uncontrolled use.
`onValueChange`	`(value: string) => void`	Unset	Called with the updated value; an empty string clears it.
`min`	`string`	Unset	Earliest allowed date, in YYYY-MM-DD format.
`max`	`string`	Unset	Latest allowed date, in YYYY-MM-DD format.
`name`	`string`	Unset	Name used when submitting a native form.
`id`	`string`	Generated	Control identifier; automatically linked to its label.
`disabled`	`boolean`	false	Prevents interaction.
`required`	`boolean`	false	Enables native required-field validation.
`className`	`string`	Unset	Additional CSS class on the component root.

This component supports the props listed above, not arbitrary native HTML attributes.

Project setup, styling and Next.js

Import @welkui/react/styles.css once in your app entry or Next.js root layout. The previews use the default theme; override --welk-* CSS tokens in your app to customize it.

For Next.js, put hooks and event handlers in a component beginning with "use client". Keep state local to the component using the control. The library preserves its client boundaries and uses your installed React version.

Use defaultValue or defaultChecked for uncontrolled fields, or a state value and its change callback for controlled fields. Do not switch between these modes during the lifetime of a field.

Modal and notification examples start closed: use their Try buttons to see them. Disabled examples are deliberately non-interactive. Validate forms, uploads, authentication, and server responses in your application; these components only provide UI.