intro

TimePicker

A flexible time input component following the Curva & Concreto doctrine.

TimePicker

The TimePicker component provides a native time selection interface. Following the ‘Curva & Concreto’ doctrine, its geometric input borders are strict, softening only in interactive focus. It integrates seamlessly into the FormField composition for validation semantics.

Import

import TimePicker from 'cobogo/components/TimePicker';

Basic Usage

FormField Composition

Start Time When does the session begin?

Validation Error

End Time * The end time must be after the start time.

Code Examples

Basic Usage

<TimePicker />

FormField Composition

<FormField label="Start Time" htmlFor="start-time" helper="When does the session begin?">
  {#snippet children(props)}
    <TimePicker {...props} />
  {/snippet}
</FormField>

Validation Error

<FormField label="End Time" htmlFor="end-time" error="The end time must be after the start time." required>
  {#snippet children(props)}
    <TimePicker {...props} />
  {/snippet}
</FormField>