---
title: "Pickers"
description: "The pickers components of @arbol-ai/ui: Calendar, ColorSwatchPicker, DateField, DatePicker, DateRangeFilter, FileUploadButton, PhoneField."
---

> Documentation Index
> Fetch the complete documentation index at: https://epidermis.getarbol.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Pickers

- [Calendar](https://epidermis.getarbol.com/components/pickers/calendar/): A month grid to pick a day, or a period with RangeCalendar. The locale names the months and days; firstDayOfWeek overrides where the week starts. Use DatePicker in forms, where people can also type the date.
- [ColorSwatchPicker](https://epidermis.getarbol.com/components/pickers/color-swatch-picker/): A palette to choose a color from, such as a service’s color in an agenda. The palette is the app’s; allowsCustomColor adds the system color chooser.
- [DateField](https://epidermis.getarbol.com/components/pickers/date-field/): A date or a time typed segment by segment, in the order and format of the locale. Use DatePicker when people should also see a calendar.
- [DatePicker](https://epidermis.getarbol.com/components/pickers/date-picker/): A date for a form, typed in the locale’s format or chosen on a calendar; DateRangePicker does the same for a period. For a dashboard’s period filter, use DateRangeFilter.
- [DateRangeFilter](https://epidermis.getarbol.com/components/pickers/date-range-filter/): The period filter of a dashboard: preset windows ending today and a custom range on a calendar, with a button to clear it. The value is plain days, so the app can keep it in the URL.
- [FileUploadButton](https://epidermis.getarbol.com/components/pickers/file-trigger/): Choosing files: a button that opens the file chooser or the camera, a drop zone, and a progress row per upload. They upload nothing; the app sends the files.
- [PhoneField](https://epidermis.getarbol.com/components/pickers/phone-field/): A phone number with its country: a searchable country list beside a box that groups the digits. The value is always the international form, such as +573001234567.

Source: https://epidermis.getarbol.com/components/pickers/index.mdx