Birthday Date

Web/Mobile

A labeled birthday field with separate day, month, and year inputs. Values always display as Persian digits.

تاریخ تولد

لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateDemo() {
  return (
    <BirthdayDate className="w-full max-w-sm">
      <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
      <BirthdayDateControl>
        <BirthdayDateDay />
        <BirthdayDateSeparator />
        <BirthdayDateMonth />
        <BirthdayDateSeparator />
        <BirthdayDateYear />
      </BirthdayDateControl>
      <BirthdayDateDescription>
        لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.
      </BirthdayDateDescription>
    </BirthdayDate>
  )
}

Installation

pnpm dlx cubix-ui@latest add birthday-date --base aria

Usage

Import

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

Example

<BirthdayDate className="w-full max-w-sm">
  <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
  <BirthdayDateControl>
    <BirthdayDateDay />
    <BirthdayDateSeparator />
    <BirthdayDateMonth />
    <BirthdayDateSeparator />
    <BirthdayDateYear />
  </BirthdayDateControl>
  <BirthdayDateDescription>
    لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.
  </BirthdayDateDescription>
</BirthdayDate>

Composition

Compose label, control, help text, and error under BirthdayDate. Inside the control, day, month, and year each render as a separate input with BirthdayDateSeparator between them. Digits always display in Persian. Filling a segment moves focus to the next; Backspace on an empty segment moves back. Paste a full date to fill all parts. Use parseBirthdayDateValue and formatBirthdayDateValue for the combined string.

Structure

BirthdayDate
├── BirthdayDateLabel
├── BirthdayDateControl
│   ├── BirthdayDateDay
│   ├── BirthdayDateSeparator
│   ├── BirthdayDateMonth
│   ├── BirthdayDateSeparator
│   └── BirthdayDateYear
├── BirthdayDateDescription
└── BirthdayDateError

Accessibility

Each segment has its own accessible name (day, month, year). Auto-advance and Backspace keep keyboard entry on one path without trapping focus. BirthdayDateDescription and BirthdayDateError are announced through aria-describedby, and invalid sets aria-invalid on every segment. Set name on the root to submit a single hidden value for the full date.

Examples

Description

Add helper text below the control for format hints or guidance.

تاریخ تولد

لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateDescriptionDemo() {
  return (
    <BirthdayDate className="w-full max-w-sm">
      <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
      <BirthdayDateControl>
        <BirthdayDateDay />
        <BirthdayDateSeparator />
        <BirthdayDateMonth />
        <BirthdayDateSeparator />
        <BirthdayDateYear />
      </BirthdayDateControl>
      <BirthdayDateDescription>
        لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.
      </BirthdayDateDescription>
    </BirthdayDate>
  )
}

Filled

Pass defaultValue on each segment to show a complete date.

تاریخ تولد

لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateFilledDemo() {
  return (
    <BirthdayDate className="w-full max-w-sm">
      <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
      <BirthdayDateControl>
        <BirthdayDateDay defaultValue="۱۵" />
        <BirthdayDateSeparator />
        <BirthdayDateMonth defaultValue="۰۶" />
        <BirthdayDateSeparator />
        <BirthdayDateYear defaultValue="۱۳۷۰" />
      </BirthdayDateControl>
      <BirthdayDateDescription>
        لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.
      </BirthdayDateDescription>
    </BirthdayDate>
  )
}

Invalid

Set invalid on the root to apply destructive styles and show BirthdayDateError.

تاریخ تولد

یک تاریخ تولد معتبر وارد کنید.

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateError,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateInvalidDemo() {
  return (
    <BirthdayDate className="w-full max-w-sm" invalid>
      <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
      <BirthdayDateControl>
        <BirthdayDateDay defaultValue="۳۲" />
        <BirthdayDateSeparator />
        <BirthdayDateMonth defaultValue="۱۳" />
        <BirthdayDateSeparator />
        <BirthdayDateYear defaultValue="۱۳۷۰" />
      </BirthdayDateControl>
      <BirthdayDateError>یک تاریخ تولد معتبر وارد کنید.</BirthdayDateError>
    </BirthdayDate>
  )
}

Disabled

Disable the field to block every segment. The control uses a muted fill; label and description stay readable.

تاریخ تولد

این فیلد فعلاً قابل ویرایش نیست.

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateDisabledDemo() {
  return (
    <BirthdayDate className="w-full max-w-sm" disabled>
      <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
      <BirthdayDateControl>
        <BirthdayDateDay defaultValue="۱۵" />
        <BirthdayDateSeparator />
        <BirthdayDateMonth defaultValue="۰۶" />
        <BirthdayDateSeparator />
        <BirthdayDateYear defaultValue="۱۳۷۰" />
      </BirthdayDateControl>
      <BirthdayDateDescription>این فیلد فعلاً قابل ویرایش نیست.</BirthdayDateDescription>
    </BirthdayDate>
  )
}

Sizes

Two heights ship by default: default (40px) and lg (48px). Use className for any other size.

تاریخ تولد

ارتفاع ۴۰ پیکسل

تاریخ تولد

ارتفاع ۴۸ پیکسل

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

const sizes = [
  { size: "default", hint: "ارتفاع ۴۰ پیکسل" },
  { size: "lg", hint: "ارتفاع ۴۸ پیکسل" },
] as const

export function BirthdayDateSizesDemo() {
  return (
    <div className="grid w-full max-w-sm gap-8">
      {sizes.map(({ size, hint }) => (
        <BirthdayDate key={size} size={size}>
          <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
          <BirthdayDateControl>
            <BirthdayDateDay />
            <BirthdayDateSeparator />
            <BirthdayDateMonth />
            <BirthdayDateSeparator />
            <BirthdayDateYear />
          </BirthdayDateControl>
          <BirthdayDateDescription>{hint}</BirthdayDateDescription>
        </BirthdayDate>
      ))}
    </div>
  )
}

In a form

Set name on the root so the combined date is submitted with the form, and pair the field with Cubix Button.

"use client"

import { Button } from "@/components/cubix/button"
import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateFormDemo() {
  return (
    <form
      className="grid w-full max-w-sm gap-6 rounded-xl bg-background p-6"
      onSubmit={(event) => event.preventDefault()}
    >
      <div className="space-y-1.5">
        <p className="text-body leading-none font-medium text-foreground">ثبت‌نام</p>
        <p className="text-caption text-muted-foreground">
          برای ادامه، تاریخ تولد خود را وارد کنید.
        </p>
      </div>
      <BirthdayDate name="birthday">
        <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
        <BirthdayDateControl>
          <BirthdayDateDay />
          <BirthdayDateSeparator />
          <BirthdayDateMonth />
          <BirthdayDateSeparator />
          <BirthdayDateYear />
        </BirthdayDateControl>
        <BirthdayDateDescription>
          لطفاً تاریخ تولد را به‌صورت روز/ماه/سال وارد کنید.
        </BirthdayDateDescription>
      </BirthdayDate>
      <div className="grid grid-cols-2 gap-2">
        <Button type="button" variant="outline">
          انصراف
        </Button>
        <Button type="submit">ادامه</Button>
      </div>
    </form>
  )
}

Custom styling

Every part accepts a className merged with the shipped cn helper. Here each segment uses a filled surface instead of the default outline.

تاریخ تولد

با className می‌توانید ظاهر را سفارشی کنید.

"use client"

import {
  BirthdayDate,
  BirthdayDateControl,
  BirthdayDateDay,
  BirthdayDateDescription,
  BirthdayDateLabel,
  BirthdayDateMonth,
  BirthdayDateSeparator,
  BirthdayDateYear,
} from "@/components/cubix/birthday-date"

export function BirthdayDateCustomDemo() {
  return (
    <BirthdayDate className="w-full max-w-sm">
      <BirthdayDateLabel>تاریخ تولد</BirthdayDateLabel>
      <BirthdayDateControl>
        <BirthdayDateDay className="border-border bg-muted dark:bg-muted" />
        <BirthdayDateSeparator />
        <BirthdayDateMonth className="border-border bg-muted dark:bg-muted" />
        <BirthdayDateSeparator />
        <BirthdayDateYear className="border-border bg-muted dark:bg-muted" />
      </BirthdayDateControl>
      <BirthdayDateDescription>با className می‌توانید ظاهر را سفارشی کنید.</BirthdayDateDescription>
    </BirthdayDate>
  )
}

API Reference

Note: Parts render data-slot attributes (birthday-date, birthday-date-label, birthday-date-control, birthday-date-day, birthday-date-month, birthday-date-year, birthday-date-separator, birthday-date-description, birthday-date-error) for targeting in tests and parent selectors. Use the same props on Base UI, React Aria, and Radix.

BirthdayDate

Prop	Type	Default	Description
size	"default" \| "lg"	"default"	Height for the control: default 40px, lg 48px. Inherited by BirthdayDateControl unless overridden. Use className for other heights.
disabled	boolean	false	Disables the field and prevents interaction. Forwarded to the segments on every base.
invalid	boolean	false	Marks the field as invalid and shows BirthdayDateError when present.
name	string	-	Writes a hidden input with the combined day/month/year value (Persian digits, slash-separated) for form submit.
className	string	-	Additional Tailwind classes merged with the root styles (last one wins).

BirthdayDateControl

Prop	Type	Default	Description
size	"default" \| "lg"	-	Overrides the size from BirthdayDate. Height matches the default and lg sizes.
children	React.ReactNode	-	Compose BirthdayDateDay, BirthdayDateSeparator, BirthdayDateMonth, BirthdayDateSeparator, and BirthdayDateYear. The control is a layout row only - each segment has its own input box.
className	string	-	Additional Tailwind classes merged with the control styles (last one wins).

BirthdayDateDay / Month / Year

Prop	Type	Default	Description
part	"day" \| "month" \| "year"	-	Fixed by BirthdayDateDay (2 digits), BirthdayDateMonth (2 digits), and BirthdayDateYear (4 digits). Values always display as Persian digits.
placeholder	string	روز / ماه / سال	Hint text shown when the segment is empty.
inputMode	"numeric"	"numeric"	Locked to numeric so mobile keyboards show a number pad.
className	string	-	Additional Tailwind classes merged with the segment styles (last one wins).
...props	Omit<React.ComponentProps<'input'>, 'type' \| 'inputMode' \| 'spellCheck' \| 'maxLength'>	-	Native input attributes (value, onChange, defaultValue, ...) are forwarded. type, inputMode, spellCheck, and maxLength stay locked. Use parseBirthdayDateValue / formatBirthdayDateValue for the combined string.

BirthdayDateSeparator

Prop	Type	Default	Description
children	React.ReactNode	"/"	Separator between day, month, and year. Defaults to /.
className	string	-	Additional Tailwind classes merged with the separator styles (last one wins).

BirthdayDateLabel / Description / Error

Prop	Type	Default	Description
className	string	-	Additional Tailwind classes merged with the part styles (last one wins).
...props	HTML attributes	-	Native attributes for the rendered element are forwarded.