intro

DatePicker

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

DatePicker

The DatePicker component provides a native date 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 DatePicker from 'cobogo/components/DatePicker';

Basic Usage

FormField Composition

Start Date The day the event starts.

Validation Error

End Date * The end date cannot be in the past.

Min and Max bounds

Launch Date

Code Examples

Basic Usage

<DatePicker />

FormField Composition

<FormField label="Start Date" htmlFor="start-date" helper="The day the event starts.">
  {#snippet children(props)}
    <DatePicker {...props} />
  {/snippet}
</FormField>

Validation Error

<FormField label="End Date" htmlFor="end-date" error="The end date cannot be in the past." required>
  {#snippet children(props)}
    <DatePicker {...props} />
  {/snippet}
</FormField>

Min and Max bounds

<FormField label="Launch Date" htmlFor="launch-date">
  {#snippet children(props)}
    <DatePicker {...props} min="2026-01-01" max="2026-12-31" />
  {/snippet}
</FormField>