Component field guide

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

LIVE COMPONENT

WelkTimePicker

An editable 24-hour time field with custom scrollable wheels showing three rows per column. Type a time or select hours/minutes using the wheels and keyboard. Use controlled value/onValueChange or uncontrolled defaultValue; an empty string clears the time.

Mission timeHH:mm · 24-hour

Hours

Minutes

Usage

React / TSX

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

<WelkTimePicker label="Mission time" defaultValue="14:30" />

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

Variants and behavior

showSeconds=false: HH:mm (default).
showSeconds=true: HH:mm:ss with an additional seconds wheel.

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.

Hours and minutes

Use 24-hour HH:mm input or open the three-row wheels.

Departure timeHH:mm · 24-hour

Hours

Minutes

Key propsdefaultValue="14:30"

With seconds

Adds a seconds wheel and accepts HH:mm:ss values.

Precise departureHH:mm:ss · 24-hour

Hours

Minutes

Seconds

Key propsshowSeconds defaultValue="14:30:45"

Empty

Start without a value and let the user type or choose a time.

Choose departureHH:mm · 24-hour

Hours

Minutes

Key propsdefaultValue=""

Disabled

The value remains visible without allowing manual or wheel edits.

Locked departureHH:mm · 24-hour

Hours

Minutes

Key propsdisabled

Usage notes and accessibility

Use 24-hour HH:mm strings, or HH:mm:ss when showSeconds is true. Empty string means no time. Supply values matching the chosen precision.
Type directly or open the custom wheels; only three rows are visible in each column. Wheel selection and keyboard interaction update the same value.
Time values do not contain a date, timezone or duration. Combine them with a date/timezone in application logic only when your use case requires it.

Props

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

WelkTimePicker 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.
`showSeconds`	`boolean`	false	Enables seconds in both the input format and wheels.
`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.