// Generated by scripts/generate-showcase.mjs. Do not edit directly. page TimePickerDetail { layout = "showcase" state playground_size = ctx.url.searchParams.get("pg_size") ?? "default" state playground_color = ctx.url.searchParams.get("pg_color") ?? "primary" state playground_id = ctx.url.searchParams.get("pg_id") ?? "time-picker-1" state playground_name = ctx.url.searchParams.get("pg_name") ?? "time-pickerField" state playground_label = ctx.url.searchParams.get("pg_label") ?? "Start time" state playground_hiddenLabel = ctx.url.searchParams.get("pg_hiddenLabel") ?? "false" state playground_value = ctx.url.searchParams.get("pg_value") ?? "" state playground_placeholder = ctx.url.searchParams.get("pg_placeholder") ?? "Enter time picker" state playground_variant = ctx.url.searchParams.get("pg_variant") ?? "normal" state playground_icon = ctx.url.searchParams.get("pg_icon") ?? "" state playground_iconPosition = ctx.url.searchParams.get("pg_iconPosition") ?? "start" state playground_helperText = ctx.url.searchParams.get("pg_helperText") ?? "Helpful context for this field." state playground_cornerHint = ctx.url.searchParams.get("pg_cornerHint") ?? "" state playground_error = ctx.url.searchParams.get("pg_error") ?? "" state playground_inline = ctx.url.searchParams.get("pg_inline") ?? "false" state playground_min = ctx.url.searchParams.get("pg_min") ?? "08:00" state playground_max = ctx.url.searchParams.get("pg_max") ?? "18:00" state playground_step = ctx.url.searchParams.get("pg_step") ?? "" state playground_format = ctx.url.searchParams.get("pg_format") ?? "24" state playground_minuteStep = ctx.url.searchParams.get("pg_minuteStep") ?? "5" state playground_hours = ctx.url.searchParams.get("pg_hours") ?? "" state playground_minutes = ctx.url.searchParams.get("pg_minutes") ?? "" state playground_readonly = ctx.url.searchParams.get("pg_readonly") ?? "false" state playground_disabled = ctx.url.searchParams.get("pg_disabled") ?? "false" state playground_required = ctx.url.searchParams.get("pg_required") ?? "false" state playground_class = ctx.url.searchParams.get("pg_class") ?? "" seo { title = "Time Picker" description = "Theme-aware, responsive time picker component." } view {
Forms component

Time Picker

Theme-aware, responsive time picker component.

26 props0 slots7 eventsTheme readyResponsive
Interactive playground

Configure Time Picker

Change any prop and inspect the server-rendered component immediately.

Live preview
Component code
<TimePicker
  id="time-picker-1"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  iconPosition="start"
  helperText="Helpful context for this field."
  min="08:00"
  max="18:00"
/>
Component props26 controls
Live examples

Designed for real product surfaces

Compare configurations and resize the browser to check responsive behavior.

Basic usage

Default field

Use a labelled field with a value, placeholder, and supporting helper text.

01
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-1"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  iconPosition="start"
  helperText="Helpful context for this field."
  min="08:00"
  max="18:00"
/>
Appearance

Outlined with start icon

Combine an outlined treatment with a leading icon.

02
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-2"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  variant="outlined"
  icon="icon-[lucide--sparkles]"
  iconPosition="start"
  min="08:00"
  max="18:00"
/>
Appearance

Floating label

Move the label into the control while preserving an accessible field name.

03
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-3"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  variant="floating"
  icon="icon-[lucide--circle-user-round]"
  min="08:00"
  max="18:00"
/>
Appearance

Pill and compact size

Use pill styling and compact sizing in dense interfaces.

04
Live preview
Component usage.wrn
<TimePicker
  size="sm"
  id="time-picker-4"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  variant="pill"
  iconPosition="start"
  min="08:00"
  max="18:00"
/>
States

Read only

Display a submitted value without allowing it to be changed.

05
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-5"
  name="time-pickerField"
  label="Start time"
  value="09:30"
  placeholder="Enter time picker"
  iconPosition="start"
  min="08:00"
  max="18:00"
  readonly="true"
/>
States

Disabled

Prevent interaction and communicate that the field is unavailable.

06
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-6"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  iconPosition="start"
  min="08:00"
  max="18:00"
  disabled="true"
/>
Layout

Inline helper text

Place the label, control, and supporting text on one responsive line.

07
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-7"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  iconPosition="start"
  helperText="We'll never share your details."
  inline="true"
  min="08:00"
  max="18:00"
/>
Layout

Field with corner hint

Place optional context opposite the label and keep the control on the next line.

08
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-8"
  name="time-pickerField"
  label="Start time"
  placeholder="Enter time picker"
  iconPosition="start"
  cornerHint="Optional"
  min="08:00"
  max="18:00"
/>
Validation

Validated field

Surface validation through @wrnexus/validation-compatible error targets and accessible state.

09
Live preview
Component usage.wrn
<TimePicker
  id="time-picker-9"
  name="validatedField"
  label="Start time"
  placeholder="Enter time picker"
  iconPosition="start"
  min="08:00"
  max="18:00"
  required="true"
/>
Component events

Events

Public events declared by this component. Custom events bubble from the component root and expose state through event.detail.

@inputFires immediately as the component value changes.
@changeFires when the component value or selection changes.
@focusFires when the component receives focus.
@blurFires when focus leaves the component.
@openFires when the component opens.
@closeFires when the component closes.
@invalidFires when the component emits the invalid event.
Event listener.js
const component = document.querySelector('[data-wrn-events]')

component.addEventListener('input', (event) => {
  console.log(event.detail)
})
Component API

Props and configuration

All content and behavior shown above is supplied through these props and slots.

PropTypeDefaultRequired
sizestring"default"No
colorstring"primary"No
idstring""No
namestring""No
labelstring"Time"No
hiddenLabelbooleanfalseNo
valuestring""No
placeholderstring""No
variantstring"normal"No
iconstring"icon-[lucide--clock-3]"No
iconPositionstring"end"No
helperTextstring""No
cornerHintstring""No
errorstring""No
inlinebooleanfalseNo
minstring""No
maxstring""No
stepstring""No
formatstring"24"No
minuteStepnumber5No
hoursstring["00", "01", "02", "03", "04", "05", "06", "07", "08", "09", "10", "11", "12", "13", "14", "15", "16", "17", "18", "19", "20", "21", "22", "23"]No
minutesstring["00", "05", "10", "15", "20", "25", "30", "35", "40", "45", "50", "55"]No
readonlybooleanfalseNo
disabledbooleanfalseNo
requiredbooleanfalseNo
classstring""No
} }