Theme

DateField

form @dryui/ui Compound

Form-first locale-aware segmented date input

dateinputfieldsegmentlocaleformdate-input

Start Here

Start from the smallest working snippet, then move to interactive examples and the full API contract below.

Styled quick start

Copy this entrypoint first. It includes the imports required to get the component on screen.

svelte
<script lang="ts">
  import '@dryui/ui/themes/default.css';
  import '@dryui/ui/themes/dark.css';
  import { DateField } from '@dryui/ui';
</script>

<DateField.Root bind:value={departureDate} name="departureDate">
  <DateField.Segment type="month" />
  <DateField.Separator />
  <DateField.Segment type="day" />
  <DateField.Separator />
  <DateField.Segment type="year" />
</DateField.Root>

Import options

Root package

ts
import { DateField } from '@dryui/ui'

Per-component subpath

ts
import { DateField } from '@dryui/ui/date-field'

Customize

Use the interactive examples to see common variants, states, and composition patterns before building your own.

Use DateField when you want direct keyboard entry in a form. If you need an overlay calendar, switch to DatePicker instead. Add `name` when the value should submit with a native form.

Default

03 23 2026

Selected: 23/03/2026

svelte
<script lang="ts">
  let date = $state(new Date());
</script>
<DateField.Root bind:value={date} name="departureDate">
  <DateField.Segment type="month" />
  <DateField.Separator />
  <DateField.Segment type="day" />
  <DateField.Separator />
  <DateField.Segment type="year" />
</DateField.Root>

Disabled

MM DD YYYY
svelte
<DateField.Root disabled>
  <DateField.Segment type="month" />
  <DateField.Separator />
  <DateField.Segment type="day" />
  <DateField.Separator />
  <DateField.Segment type="year" />
</DateField.Root>

Structure

Compound components always start with DateField.Root. Use this structure block to understand required wrappers before you wire state or styling.

DateField.Root
  DateField.Segment
  DateField.Separator
DateField.Root DateField.SegmentDateField.Separator

Compose

The full API contract lives here: props, CSS variables, and the public data attributes you can target when styling.

Compound component. Start with DateField.Root, then add only the parts you need.

DateField.SegmentDateField.Separator

DateField.Root

Prop Type Default Required Bindable
value
Date | null
$bindable<Date | null>(null) — ✓
name
string Adds a hidden input so the selected date participates in native form submission as YYYY-MM-DD.
 — — —
locale
string
— — —
min
Date | null
— — —
max
Date | null
— — —
disabled
boolean
— — —
size
smmdlg
 'md' — —
children
Snippet
— ✓ —

Forwards <div> attributes via rest props. Common examples: id, style, role.

DateField.Segment

Prop Type Default Required Bindable
type
DateSegmentType
— ✓ —

Forwards <span> attributes via rest props. Common examples: id, style, aria-label.

DateField.Separator

Prop Type Default Required Bindable
separator
string
— — —

Forwards <span> attributes via rest props. Common examples: id, style, aria-label.