pickerId/picker_id is a required prop to instantiate the Date Picker. The presence of pickerId/picker_id in your Date Picker also associates the label with the input, providing the ability to focus the Date Picker by clicking the label.
The defaultDate/default_date prop has a null or empty string value by default. You can pass an ISO date string (preferred rails method) or date object (preferred JS method) if you want a default value on page load. Use Ruby UTC DateTime objects and convert them to ISO date strings with DateTime.now.utc.iso8601.
If you use a Date object without UTC time standardization the Date Picker kit may misinterpret that date as yesterdays date (consequence of timezone differentials and the Javascript Date Object constructor). See this GitHub issue for more information and the anti-pattern examples below.
You can leverage the defaultDate/default_date prop with custom logic in your filter or controller files where the determination of the default value changes based on user interaction. The page can load with an initial default date picker value or placeholder text, then after filter submission save the submitted values as the "new default" (via state or params).
Setting the allowInput prop to true permits users to key values directly into the input. This prop is set to false by default.
The date picker is built with the text input kit. Text input props you pass to the date picker kit will be forwarded to the input, with a few exceptions. The value attribute is automatically handled and bound to whatever date string is contained by the input field. You cannot pass a custom value prop. id props passed to the date picker kit will be assigned to it's parent/wrapper div. The pickerId prop is passed directly to the input and is required to instatiate the date picker.
You must use inputAria or input_aria and inputData or input_data props if you wish to pass data or aria attributes to the text input kit. If you use data or aria props they will be passed to the date picker kit itself instead. Also be aware the default behavior of text input aria and data props is to pass those props to attributes on the wrapping div not on the input itself.
The placeholder prop has a default string value: "Select Date". You can replace this with your own string or an empty string if you'd prefer it blank.
Default label prop is "Date Picker". To remove the label set the hideLabel prop in React or the hide_label prop in Rails to true.
Your change handler function has access to two arguments: dateStr and selectedDates.
The first, dateStr, is a string of the chosen date. The second, selectedDates, is an array of selected date objects. In many use cases selectedDates will have only one value but you'll still need to access it from index 0.
NOTE: On Change does not account for manual input by users, so if your date picker sets allowInput, you should use the onClose method instead.
The onClose handler function has access to two arguments: dateStr and selectedDates.
The first, dateStr, is a string of the chosen date. The second, selectedDates, is an array of selected date objects. In many use cases selectedDates will have only one value but you'll still need to access it from index 0.
NOTE: onClose is the ideal handler function to use when allowInput is enabled.
To use the quickpick:
mode must be set to rangeselectionType must be set to quickpickUse the onClose handler function to access the startDate and endDate values. Check the onClose example for more information.
Use this_ranges_end_today/thisRangesEndToday to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if the this_ranges_end_today/thisRangesEndToday prop is used, end date on that range will be today's date.
The customQuickPickDates/custom_quick_pick_dates prop allows for the user/dev to define their own quick pick dates.
The prop accepts an object with two key/value pairs: dates & override (separate doc example below).
The dates property accepts an array of objects. Each object in the array has label and value properties. The label is what will be displayed in the UI of the dropdown menu. The value property is just the date that is going to be passed to the datepicker. The value property can be an array of two strings that represent a range, allowing for the dev to be extremely specific. Additionally, the dates array allows for a clean, simple API under that automatically converts dates in a common vernacular.
The timePeriod property accepts "days", "weeks", "months", "quarters" or "years", representing past time periods.
The amount property accepts any number.
The customQuickPickDates/custom_quick_pick_dates prop allows for an override boolean. The override allows for the user to completely override the quick pick dates that ship with the component. Default of override is set to true. If you would like to simply append your dates to the default quick pick dates, set this prop to false explicitly.
To set a default value using Quick Pick, use the defaultDate or default_date prop. This prop should match one of the labels displayed in the UI of the dropdown menu.
You can link a Dropdown (quickpick variant) to standard DatePickers using the following props:
For the Dropdown:
controlsStartId: ID of the DatePicker that should receive the start date.
controlsEndId: ID of the DatePicker that should receive the end date.
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
For the Start/End DatePickers:
syncStartWith: ID of the quickpick this start date is synced to.
syncEndWith: ID of the quickpick this end date is synced to.
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
You can find a full list of flatpickr events and hooks in their documentation.
Use window.addEventListener("DOMContentLoaded", () => {}), not document.addEventListener("DOMContentLoaded", () => {}).
Defaults to [1900, 2100]. Combine with min-max prop for best results.
By default selectType prop is disabled. To activate it set selectionType prop in JSX/TSX to month. To activate it set selection_type prop in a rails file to month.
By default selectType prop is disabled. To activate it set selectionType prop in JSX/TSX to week. To activate it set selection_type prop in a rails file to week.
To select time as well, you should pass the enableTime boolean prop. You can also enable timezone display by passing showTimezone.
Datepicker supports position options from Flatpickr Options Documentation. There are multiple positioning options to choose from.
Note: In order for the above prop to work properly, you must also send staticPosition={false} to your Datepicker kit instance.
If you are using the Datepicker within a Dialog, you cannot use the staticPosition/static_position prop.
Upon adding static={false} to the date picker, you will notice that the date picker detaches from the input field while scrolling. This is a known Flatpickr nuance. By adding the scrollContainer prop, you can tell the date picker which DOM container it should watch for scroll events. In this example, you can see that scrollContainer=".pb--page--content--main" is being passed in order to keep the date picker correctly positioned on page scroll.
Useage: scrollContainer: .validQuerySelectorHere
The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label to visually indicate that the field is required. This is purely visual and does not enforce validation—you can pair it with HTML required, client-side validation, or server-side validation as needed.
This kit's options prop requires an array of objects, each of which will be used as the selectable options within the dropdown. Each option object can support any number of key-value pairs, but each must contain label and value.
The autocomplete prop can be used to add autocomplete or typeahead functionality to the Dropdown's default Trigger. This prop is set to 'false' by default.
multiSelect is a boolean prop that if set to true will allow for multiple options to be selected from the Dropdown.
multiSelect is set to false by default.
multiSelect can also be used with the autocomplete functionality.
By default, the multiSelect prop will render selected options as the default FormPill. FormPillProps however can be used to customize these Pills with any props that exist for the FormPill.
This prop must be an object that contains valid FormPill props. For a full list of FormPill props, see here.
For the subtle variant, it is recommended that you set the Separators prop to false to remove the separator lines between the options for a cleaner look.
The dropdown is built using all of the following subcomponents:
Dropdown.Trigger is the UI component that users interact with to toggle the dropdown.
Dropdown.Container is the floating container that wraps the list of dropdown options.
Dropdown.Option renders options that are passed to the container.
Each of these subcomponents can be altered using global props and/or their respective props. See doc examples below for more information on each.
autocomplete prop can also be used in conjunction with the subcomponent structure.
The top-level Dropdown component optionally accepts any string through a label prop to produce a label above your trigger element.
Add an id to wire the label to the trigger so that clicking the label will move focus directly to the input, and open the drop-down.
Dropdown.Option subcomponent accepts any child components to customize the options' contents and display. By default, options are Body kit text that is set by the label value from the option object.
Optionally utilize customDisplay on the Dropdown.Trigger subcomponent to customize its content after an option is selected. Pass in any combination of kits to create a custom display. When a user clicks on an option, the kits passed into customDisplay will display as the selected option.
The placeholder prop can also be used to customize the placeholder text for the default Dropdown.Trigger.
The onSelect prop returns the selected option as an object to be utilized by the dev. In this example we are using the onSelect to set a state with the selected option and using it to customize the customDisplay.
Optionally replace the default trigger's select element by passing child components directly to the Dropdown.Trigger.
The optional searchbar boolean prop can also be used on the Dropdown.Container to render a searchbar with typeahead functionality within the dropdown itself. This is especially useful when a custom trigger is being used.
searchbar is set to false by default.
By default, dropdown option paddingX is set to sm and paddingY is set to xs, but this padding can be overridden using our global padding props. In this example we are setting the option padding to sm all around.
The activeStyle prop can be used to customize the appearance of the dropdown selection indicator. It accepts an object with the following keys: backgroundColor sets the background color of the selected item (and its hover state); fontColor sets the font color of the selected item.
backgroundColor Type: String | Values: bg_light | white | Default: (no selection) is primary
fontColor Type: String | Values: primary | all Playbook Text Colors | Default: (no selection) is white
Use the Dropdown.Option subcomponent structure to include custom layouts inside dropdown menus. Icons can be placed alongside the Body label text.
Radio inputs can be used inside Dropdown.Option for a custom layout that mimics form-like selection within a dropdown. Use the activeStyle backgroundColor and fontColor props to create contrast between the Radio selection indicator and the Dropdown selection background indicator.
The blankSelection prop adds a blank option at the top of the dropdown options list. This allows users to explicitly clear their selection by choosing the blank option.
The blank selection option appears as the first item in the dropdown and has an empty value (id: "", value: ""). When selected, it effectively clears the dropdown selection.
The placeholder prop allows you to customize the placeholder text that appears when no option is selected in the dropdown.
The placeholder prop works with all dropdown variants (default, subtle, and quickpick). When no option is selected, the placeholder text is displayed. When an option is selected, the placeholder is replaced by the selected option's label. The default placeholder text is "Select..." if no placeholder is provided.
To use an external control (like a reset button) to clear Dropdown selection, you can make use of the useRef hook. You must pass a ref to the Dropdown component and use that ref within the onClick for the external control in the way shown in the code snippet below.
The clearable prop controls whether the clear (X) button appears in the dropdown. When set to false, the clear button is hidden.
This is useful in two scenarios:
The constrainHeight prop limits the dropdown container height to 18em and enables vertical scrolling when the content exceeds this height. This prevents long dropdown lists from rendering off-screen.
When constrainHeight is true, the dropdown will:
This is particularly useful for dropdowns with many options, such as long lists or quickpick variants with many date range options.
The useDropdown hook can also be used to toggle the dropdown open and closed using an external control. To do so, you must manage state with the custom hook, pass the dropdown:'pb-dropdown-trigger' data attribute to the external control and use the isClosed prop as shown.
The closeOnClick prop allows you to control when the Dropdown closes in response to click interactions. The value any reflects the default behavior, where the dropdown will close after any click. Set it to outside to ensure interactive elements as dropdown options are able to be interacted with or modified. Set it to inside for a dropdown that only closes when the input or dropdown menu is clicked.
The QuickPick variant provides predefined date based options when variant="quickpick" is used.
Open the Dropdown above to see the default options.
The optional rangeEndsToday prop can be used with the quickpick variant to set end date on all ranges that start with 'this' to today's date. For instance, by default 'This Year' will set end day to 12/31/(current year), but if rangeEndsToday prop is used, end date on that range will be today's date.
To set a default value for the Dropdown, you can use the label of the range you want set as default, for example "This Year", "Today", etc.
The customQuickPickDates prop allows for defining custom quick pick date options for the dropdown. The prop accepts an object with two properties: dates and override.
The dates property accepts an array of objects. Each object has label and value properties. The label is what will be displayed in the dropdown menu. The value property defines the date range that will be selected, and can be:
["06/01/2022", "06/07/2022"])timePeriod and amount properties for dynamic date calculations:
timePeriod property accepts "days", "weeks", "months", "quarters", or "years", representing past time periods calculated from today.amount property accepts any number.The override property is a boolean that controls whether custom dates replace or append to the default quick pick options. Default is true (replaces defaults). Set to false to append your custom dates to the default quick pick options.
You can link a Dropdown (quickpick variant) to standard DatePickers using the following props:
For the Dropdown:
controlsStartId: ID of the DatePicker that should receive the start date.
controlsEndId: ID of the DatePicker that should receive the end date.
When a quickpick option like “This Year” is selected, it automatically populates the linked start and end inputs.
For the Start/End DatePickers:
syncStartWith: ID of the quickpick this start date is synced to.
syncEndWith: ID of the quickpick this end date is synced to.
When a user manually edits the start or end date, it clears the selected quickpick to prevent conflicting values.
The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
You can use requiredIndicator/required_indicator with any validation approach: HTML5 validation via the required prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the required prop.
The MultiLevelSelect kit renders a multi leveled select dropdown based on data from the user. treeData is a required prop that is expected to contain the data in the form of an array of objects. See code snippet for an example data array.
For the React version of the kit, the onSelect prop returns an array of objects. This array contains all checked items irrespective of whether it is a parent, child or grandchild. Open the console on this example and check and uncheck checkboxes to see this is action!
For the Rails version of the kit, there is no onselect. The form submits as a array of strings, following the typical rails pattern of utilizing hidden inputs. The strings are the values of the selected items' ids. For example, ["103", "106", "107"].
You can pass react-hook-form props to the MultiLevelSelect kit. Check your console to see the full data selected from this example.
Optionally enable the single variant to replace checkboxes with radios so the input accepts and returns only a single selection.
Dynamically control your selectable options by passing hideRadio: true to any node within your tree data to omit that node's radio selector. In this example we've hidden all radios except ultimate children (nodes without descendants).
The returnAllSelected or return_all_selected prop can be used when users want data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
NOTE: This variant also does not automatically uncheck the parent when any of the child nodes are unchecked. returnAllSelected is set to false by default.
NOTE: For larger trees that may return many pill selections, you can optionally set input_display: "none"(for Rails) or inputDisplay = "none"(for React) to hide all pills within the input.
Use the inputDisplay/input_display prop to optionally display only the count in the display as opposed to multiple pills. This prop is set to 'pills' by default.
NOTE: inputDisplay/input_display is particularly useful for larger trees that may return many pill selections, helping to keep the input field clean and compact. This prop should not be used with the Single Select variant.
selected_ids is an optional prop that accepts an array of ids and controls the selected state of the tree nodes that match the values passed. When used within react-hook-form, this prop can be used to manage the selected state of any ids passed to it.
Items that include checked:true on the treeData itself will also be selected on page load, even without being passed to selectedIds.
When an item is marked as checked on page load by any means, the dropdown will expand to show the checked items for easier accessibility.
When using selectedIds and variant="single" together (see single select doc examples), the selectedIds array should contain only one id, because only one item can be selected and displayed at a time. If the selectedIds array has multiple ids in it, the first id in the array will be the treeData node checked upon page load.
Change the form pill color by passing the optional pillColor prop. Product, Data, and Status colors are available options. Check them out here in the Form Pill colors example.
The MultiLevelSelect also provides a subcomponent structure which can be used to render children to the right of the Checkboxes and their labels. As seen in the code snippet below, these children have access to the current item being iterated over which can be used for conditional rendering.
The MultiLevelSelect subcomponent structure is also available in the 'Single Select' variant. In this variant, the children will be rendered to the right of the Radios and their labels.
The MultiLevelSelect component optionally accepts a label prop to produce a label above the input.
Add an id to wire the label to the input so that clicking the label will move focus directly to the input, and open the drop-down.
To disable individual items in the treeData, include disabled:true within the object on the treeData that you want disabled. See the code snippet below for an example of how to do this.
If a parent is selected, the parent will be returned in the selected items list, even if it has disabled children.
Individual items can also be disabled by including the disabled:true within the object on the treeData for the returnAllSelected/return_all_selected variant. As noted above, this variant will return data on all checked nodes from the dropdown, irrespective of whether it is a parent or child node.
For the default variant, disabling the parent item will automatically disable it's children as well.
If you want to be able to disable a parent WITHOUT disabling it's children, use the returnAllSelected/return_all_selected variant.
For the returnAllSelected/return_all_selected variant, disabling the parent item will NOT automatically disable it's children since this version allows you to select a parent even if all children are unselected.
You can manually pass disabled:true to any and all children of a disabled parent if you want to do so.
Individual items can be disabled by including disabled: true within the object on the treeData for the single variant. Disabled options are visibly disabled in the dropdown UI and cannot be selected via mouse click or keyboard navigation. When a parent node is disabled, all of its children are automatically disabled as well.
The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
You can use requiredIndicator/required_indicator with any validation approach: HTML5 validation via the required prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the required prop.
When a parent resets a Multi Level Select (e.g., “Default” or “Clear”), the kit needs a key that changes with the selection because React uses the key to determine component identity and whether to preserve internal state. If the key doesn’t change, React reuses the existing instance and may keep showing the old selection instead of resetting to the new one.
Use the placeholder prop to customize the initial text shown in the input when nothing is selected. The default is Start typing....
To create a select with non-selectable subheaders, use a Custom Select component to render a native <select> containing <optgroup> elements. The optgroup HTML element groups related options under a non-selectable label in the dropdown.
Select w/ Error shows that an option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).
The multiple prop enables multiple selections; however, for a better user experience, we recommend our Typeahead kit.
You can pass react-hook-form props to a select kit. You can use register which will make the value available for both the form validation and submission.
Use the input_options / inputOptions prop to pass additional attributes directly to the underlying <select> element instead of the outer wrapper. This is useful for applying data attributes, custom IDs, or other HTML attributes that need to be on the select element itself.
The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
You can use requiredIndicator/required_indicator with any validation approach: HTML5 validation via the required prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the required prop.
Default Selectable Cards are multi select by default.
Single Select allows only one selectable card in the set to be selected.
Selectable Cards can pass text or block content.
Selectable Cards can pass images with optional text.
Selectable Cards can show an input indicating state.
When using custom icons it is important to introduce a "clean" SVG. In order to ensure these custom icons perform as intended within your kit(s), ensure these things have been modified from the original SVG markup:
Attributes must be React compatible e.g. xmlns:xlink should be xmlnsXlink and so on. There should be no hyphenated attributes and no semi-colons!.
Fill colors with regards to g or path nodes, e.g. fill="black", should be replaced with currentColor ala fill="currentColor". Your mileage may vary depending on the complexity of your SVG.
Pay attention to your custom icon's dimensions and viewBox attribute. It is best to use a viewBox="0 0 512 512" starting point when designing instead of trying to retrofit the viewbox afterwards!
You must source your own SVG into component/view you are working on. This can easily be done in programmatic and maintainable ways.
So long as you have a valid React <SVG> node, you can send it as the customIcon prop and the kit will take care of the rest.
Some Rails applications use only webpack(er) which means using image_url will be successful over image_path in most cases especially development where Webpack Dev Server is serving assets over HTTP. Rails applications still using Asset Pipeline may use image_path or image_url. Of course, YMMV depending on any custom configurations in your Rails application.
Error shows that the radio option must be selected or is invalid (i.e. when used in a form it signals a user to fix an error).
Use the custom_children prop to enable the use of kits instead of text labels.
You can pass react hook props to the radio kit.
You can pass react hook props to the checkbox kit.
Use the Time Picker for time-only selection. For date and time selection, use the DatePicker with Time Selection Enabled instead.
Set time_format / timeFormat to 24hour to display the time selection dropdown in a 24-hour format.
The default_time / defaultTime prop sets a default time value and accepts both 12-hour and 24-hour formats.
Enable timezone display by passing show_timezone / showTimezone.
Use the min_time / minTime and max_time / maxTime props to restrict the selectable time range. This example demonstrates minimum-only, maximum-only, and combined ranges in both 12-hour and 24-hour formats.
The requiredIndicator/required_indicator prop displays a red asterisk (*) next to the label, visually indicating that the field is required. This is purely visual and does not enforce validation.
You can use requiredIndicator/required_indicator with any validation approach: HTML5 validation via the required prop, client-side validation, or backend validation. For this reason, it works independently and doesn't need to be paired with the required prop.
Demonstrates the onChange and onClose event handlers for the Time Picker.
