WelkEmpty
Type YYYY-MM-DD or choose a day using the custom calendar.
YYYY-MM-DD
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Key props
defaultValue=""Component field guide
Explore live variants, compare states, and learn every prop. Pick a component to start.
WelkDatePicker
A full-month custom calendar with month navigation and an editable date field. Select a day or type a date; min and max constrain available dates. Use controlled value/onValueChange or uncontrolled defaultValue. Date strings use YYYY-MM-DD.
YYYY-MM-DD
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Usage
import { WelkDatePicker } from "@welkui/react";
<WelkDatePicker label="Pick a date" defaultValue="2026-10-23"
onValueChange={(date) => console.log(date)} />Import @welkui/react/styles.css once in your app. Stateful snippets belong inside a React component.
Variants and behavior
- Full calendar presentation. Use WelkDateInput for the compact popup version.
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.
Preselected
Starts on a known date; selecting a day updates the field.
YYYY-MM-DD
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Key props
defaultValue="2026-10-23"Bounded range
Only October 20-28, 2026 can be selected. Navigate the calendar to inspect disabled days.
YYYY-MM-DD
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Key props
min="2026-10-20" max="2026-10-28"Disabled
A visible value with selection and editing disabled.
YYYY-MM-DD
| Sun | Mon | Tue | Wed | Thu | Fri | Sat |
|---|---|---|---|---|---|---|
Key props
disabled defaultValue="2026-10-23"Usage notes and accessibility
- Use the visible calendar when picking a day is the primary task. Use WelkDateInput for compact forms.
- Values and boundaries are real YYYY-MM-DD calendar dates, not localized display strings or Date objects. Empty string means no selected date; invalid supplied dates throw.
- min and max constrain day selection. Provide a visible label and a name for native form submission. Enforce business rules again when processing the form.
Props
Required props are marked in the default column. Other props are optional. ReactNode accepts text or JSX.
| 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.