logo
DocsThemes

DateField

A date field allows users to enter and edit date and time values using a keyboard. Each part of a date value is displayed in an individually editable segment.

SourceReferenceAPI Reference

Usage#

Demo#

import { DateField } from "pigment-ui";

function DateFieldDemo() {
  return <DateField label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Size#

import { DateField } from "pigment-ui";

function DateFieldSize() {
  return (
    <div className="flex flex-col gap-4">
      <DateField size="sm" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <DateField size="md" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <DateField size="lg" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
    </div>
  );
}

Radius#

import { DateField } from "pigment-ui";

function DateFieldRadius() {
  return (
    <div className="flex flex-col gap-4">
      <DateField radius="sm" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <DateField radius="md" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <DateField radius="lg" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <DateField radius="full" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <DateField radius="none" label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
    </div>
  );
}

Content#

import { DateField } from "pigment-ui";
import { PinIcon, UserIcon } from "lucide-react";

function DateFieldContent() {
  return <DateField startContent={<UserIcon />} endContent={<PinIcon />} label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Invalid#

import { DateField } from "pigment-ui";

function DateFieldInvalid() {
  return <DateField isInvalid errorMessage="This is an error message." label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Disabled#

import { DateField } from "pigment-ui";

function DateFieldDisabled() {
  return <DateField isDisabled label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />;
}

Validation#

import { Button, DateField } from "pigment-ui";

function DateFieldValidation() {
  return (
    <form className="space-y-4">
      <DateField isRequired label="Birth date" description="Lorem ipsum dolor sit amet." className="w-64" />
      <Button type="submit">Submit</Button>
    </form>
  );
}
Edit this page
ComboBoxDatePicker