# Tear-off day

A date picker as the block calendar that hangs in a kitchen: a thick pad bound at the top, one thin sheet a day, torn off along its perforation as you move forward and laid back on when you go back. The small printed month at the foot of the sheet is the picker.

Kit part · With the Kit · https://tactileui.dev/parts/tear-off-day

> The code and styling for this part come with the Tactile UI Kit, which is in the Founder Pass. Sign in if you have it. Sign in: https://tactileui.dev/auth/sign-in The price: https://tactileui.dev/pricing

## Anatomy

The sheet is paper from the kit’s paper tokens, so a dark finish dims it rather than darkening it, and the second ink is mixed from the paper ink and the kit red. A change forward keeps the new day as the base and lays a copy of the old sheet over it: a CSS 3D turn from the binding corner, a shadow that passes under the curl, and a jagged stub left at the perforation for a moment. A move of several days fans up to five copies, each a little behind the last, then lands on the date. A move back lays a copy of the earlier sheet on from above and settles it. The printed month is rebuilt from the calendar part’s own weeks and weekday arithmetic; tearSheets(from, to) is pure and caps the fan at five. Reduced motion skips the copies and changes the sheet at once, and the hidden field follows every change.

## Variants

- A Sunday, in the second ink
- A flagged day

## States

- At rest
- Mid tear

## Props and options

| Name | Kind | Description |
| - | - | - |
| value | attribute | The chosen day, also written to the hidden field. Set it to change the sheet from your own code. |
| name | attribute | The hidden input carries the ISO date with the form. |
| min · max | attribute | The ends of the range. Days outside stay printed, are disabled and can never be chosen. |
| flagged | attribute | Days printed in the second ink beside Sundays: closures, no-delivery days. |
| locale · first-day | attribute | Month, weekday and day names come from Intl; the week starts on the calendar part’s own setting. |
| change | event | Fires once the chosen day has changed, after the tear has settled. |
| tearSheets(from, to) | function | Pure: how many sheets a move tears, from 0 (back) to 5 (the fan), or null for a date it cannot read. |

## Usage notes

Press a date in the printed month and the sheet tears forward to that date (an earlier date lays a sheet back on); press the big printed day or the next-day key and it tears one sheet. It picks one day, never a range: a range is a different part, the Date picker or the Calendar. Use the day keys beside the block or the printed month at the foot. Arrows move a day or a week, Home and End a week’s ends, Page Up and Page Down a month, Enter chooses. The tear plays on a change forward; reduced motion changes the sheet at once.

## Accessibility

- Every date is a real button named in full: the weekday, day, month and year, with today, flagged, chosen and unavailable where they are true.
- The previous and next day keys name the date they go to and stop at min and max. The month arrows name the month they open and stop at the same bounds.
- A polite status region speaks the new date once it is chosen; the printed month’s own label is polite as the grid pages.
- The chosen day carries a printed pencil ring, not only a colour; unavailable days are struck through and keep their place.
- The hidden field posts ISO, and focus returns to the chosen day after the tear so the keyboard stays where the choice was made.

## Related parts

- [Calendar](https://tactileui.dev/parts/calendar): A month on a plate. The month and year sit on two drums behind a window and roll when you page; the chosen day is a latched cap, a range is a groove cut between two caps, and events are lamps named in the line below.
- [Date picker](https://tactileui.dev/parts/date-picker): A date field with its calendar card in a slot underneath: type a date in any common form for your locale, or press the key and the card slides out. Single dates and ranges; shown the Intl way, posted as ISO.
- [Date field](https://tactileui.dev/parts/date-field): A date typed in three segments, day, month and year, in the field’s own well. Each segment is a small number you can step with the arrow keys or type over, and typing moves you on by itself once a number is complete. The order and the separator are the reader’s. A calendar key at the right of the well opens the kit’s calendar for anyone who would rather point. The form gets an ISO date, yyyy-mm-dd, or nothing while the date is not complete, and a wrong date says what is wrong in a sentence: February has 28 days in 2026.