Skip to main content

Datepicker

Component
Live

The Datepicker component provides a visual representation for selecting dates.

FigmaCode

Usage​

Datepicker provides a clear and intuitive interface for users to select a specific date. Users can type a date directly into the input field or use the calendar popup to make a selection.

Installation​

Install

yarn add @iag/chroma-react-ui.components

Import

import { Datepicker } from "@iag/chroma-react-ui.components";

When to use​

Use Datepicker for selecting unknown dates or when a visual calendar of dates is helpful. Also, consider using when the date to be selected is close to the present time.

When to avoid​

Avoid using Datepicker for familiar dates (i.e. Date of Birth). Instead, consider the Date Format component.

Do

  • Do use placeholders to guide users on input expectations and format.
  • Do provide help text for additional context or prompts.
  • Do use informative error messages for easier correction.