Creating a Date picker in React

To implement a minimal react-datepicker that looks and feels like a USWDS (U.S. Web Design System) component, you can leverage the customInput prop. This allows you to use a standard USWDS text input while letting the library handle the calendar logic. Here is a solution that uses the USWDS design tokens (classes) to create a clean, icon-free field with a CSS-only arrow. 1. The React Component This setup uses the usa-input class for the field and a custom "wrapper" to position the CSS arrow. import React, { useState, forwardRef } from "react"; import DatePicker from "react-datepicker"; import "react-datepicker/dist/react-datepicker.css"; // 1. Define the USWDS-styled custom input const USWDSInput = forwardRef(({ value, onClick, placeholder }, ref) => (

)); export default function MinimalUSWDSDatePicker() { const [startDate, setStartDate] = useState(null); return (

Select a date setStartDate(date)} customInput={} dateFormat="MM/dd/yyyy" />

); } 2. The USWDS-Inspired CSS USWDS doesn't have a "native" CSS-only arrow for date inputs (they usually use an SVG button), so we add this small bit of CSS to match the USWDS aesthetic. /* Container for relative positioning */ .usa-date-picker-minimal { position: relative; width: fit-content; } /* Ensure the input looks like a standard USWDS field */ .usa-date-picker-minimal .usa-input { cursor: pointer; background-color: #fff; padding-right: 2.5rem; /* Space for our arrow */ } /* Custom CSS Down Arrow (No Icons) */ .usa-datepicker-arrow { position: absolute; right: 1rem; top: 50%; transform: translateY(-50%); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 5px solid #565c65; /* USWDS 'base-dark' color */ pointer-events: none; } /* Optional: Clean up the calendar popup to match USWDS font */ .react-datepicker { font-family: "Public Sans Web", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; border: 1px solid #adadad; } Why this fits your request: * Simple Field: Uses the usa-input class for a flat, clean government-standard look. * Text Placeholder: The placeholder="MM/DD/YYYY" shows clearly when the state is null, unlike the native HTML5 date input. * No Icons: Uses a zero-asset CSS triangle for the arrow. * Accessibility: By using forwardRef, the calendar correctly anchors to the input field, and the usa-label ensures screen reader compatibility. Would you like me to help you style the calendar popup itself to match the USWDS blue/primary color palette?