Skip to main content

DateField

The DateField component captures date input with a consistent interface for date selection and proper validation. Use it to collect date information in forms, scheduling interfaces, or data entry workflows.

The component supports manual text entry. For visual calendar-based selection, consider using DatePicker or DateSpinner components.

Support
Targets (10)

Supported targets

Use cases

  • Scheduling: Collect appointment dates, delivery dates, or scheduling information.
  • Transaction dates: Capture transaction dates or expiration dates in financial interfaces.
  • Filtering: Provide date-based filtering controls for reports or transaction histories.
  • Validation: Support form submissions with proper date validation.

Anchor to examplesExamples

Anchor to example-capture-date-input-with-a-date-fieldCapture date input with a date field

Capture date input using a DateField component with built-in validation and picker integration. This example shows a basic date field with label and placeholder text.

Capture date input with a date field

Capture date input with a date field

<s-date-field
label="Date"
value="2025-10-08"
/>

Anchor to example-handle-date-selection-eventsHandle date selection events

Subscribe to date input events to respond when merchants select or enter dates. This example shows how to handle onChange events to capture date selections, enabling real-time validation, date range checks, or dynamic scheduling behavior based on merchant input.

Handle date selection events

<s-date-field
label="Order date"
value="2024-10-26"
onInput={(event) => console.log('Input:', event.currentTarget.value)}
onChange={(event) => console.log('Change:', event.currentTarget.value)}
onFocus={(event) => console.log('Focused with:', event.currentTarget.value)}
onBlur={(event) => console.log('Blurred with:', event.currentTarget.value)}
/>

Anchor to propertiesProperties

Configure the following properties on the DateField component.

Anchor to details
details
string

Additional text to provide context or guidance for the field. This text is displayed along with the field and its label to offer more information or instructions to the user.

This will also be exposed to screen reader users.

Anchor to disabled
disabled
boolean
Default: false

Disables the field, disallowing any interaction.

Anchor to error
error
string

Indicate an error to the user. The field will be given a specific stylistic treatment to communicate problems that have to be resolved immediately.

Anchor to id
id
string

A unique identifier for the element.

Anchor to label
label
string

Content to use as the field label.

Anchor to required
required
boolean
Default: false

Whether the field needs a value. This requirement adds semantic value to the field, but it will not cause an error to appear automatically. If you want to present an error when this field is empty, you can do so with the error property.

Anchor to value
value
string

The current value for the field. If omitted, the field will be empty.

Anchor to eventsEvents

The DateField component provides event callbacks for handling user interactions. Learn more about handling events.

Anchor to blur
blur
(event: <"s-date-field">) => void

Callback when the element loses focus.

Anchor to change
change
(event: <"s-date-field">) => void

Callback after editing completes (typically on blur).

Anchor to focus
focus
(event: <"s-date-field">) => void

Callback when the element receives focus.

Anchor to input
input
(event: <"s-date-field">) => void

Callback when the user makes any changes in the field.

Anchor to best-practicesBest practices

  • Choose for direct text input: Use DateField when users know the exact date and can type it efficiently. Use DatePicker for calendar selection or DateSpinner for space-constrained layouts.
  • Explain date constraints: Use details to clarify requirements like "Select a date within the next 30 days" or "Must be a future date."
  • Write actionable error messages: Provide clear validation messages for invalid dates that help users correct their input.
Was this page helpful?