Load as checked

Custom Checkbox

Default w/ Error

Checkbox w/ Options

Indeterminate Checkbox

Date Picker


Date Picker

Hide Input Icon

Date Picker

Default Date

Default Date String
Default Date Dynamic
Default Date Range
Default Behavior

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.

Input Field

Aria, Name, and Data Attributes
Custom Placeholder
Blank Placeholder
Disable Input

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.


Your Label Here

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.


Date Picker


Date Picker
Date Picker
Date Picker
Date Picker

A full list of formatting tokens, i.e. "m/d/Y" can be found here.

Disabled Dates

Disable Single Date
Disable Multiple Dates
Disable Single Range
Disable Multiple Ranges
Disable Specific Weekdays

Min Max

Dynamic dates
Absolute formatted dates


Date Picker
Invalid date. Please pick a valid date.

Flatpickr Methods



You can find a full list of flatpickr events and hooks in their documentation.

Year Range

Date Picker

Defaults to [1900, 2100]. Combine with min-max prop for best results.


Unformatted Date Object
Date Object Without Time - Displays Yesterday's Date
Unformatted DateTime Object
String Conversion Without ISO Formatting


Date Picker



Default + Validation

Validation displays an error with red border and red text below indicating that the user must fill out the field.

Form Group


First Name
Middle Intial
Last Name


with label

Full Width

First Name
Middle Intial
Last Name

Full Width is a prop that can be added to any of the Form Group options. This prop allows the Form Group to stretch the full width of the div.

Date Picker

Event Date



Selectable Card

Selectable Card Icon

Form Pill

Form Pill User

Anna Black

Anna Black

Form Pill Size

Anna Black

Anna Black

Form Pill Tag

this is a tag



Use the confirmation prop to only include the label and show/hide icon.

Meter Settings

By default, the minimum length is 12 and the strength meter will show a strength of 1 if not met. Notice the bar won't change from red until the minimum is met
Use the minLength prop to adjust.

The meter also response to averageThreshold and strongTreshold props. averageThresold defaults to 2, and strongThreshold defaults to 3.
This means that the bar will turn yellow when the strength of the passphrase is calculated to be 2 on a 0-4 scale, and green when 3.

Adjust these props to tune the sensitivity of the bar.
Note: minimum length trumps strength and will set the bar to a red color, despite whatever strength is calculated.

Input Props

inputProps is passed directly to an underlying Text Input kit. See the specific docs here for more details.


showTipsBelow(react) / show_tips_below(rails) takes 'xs', 'sm', 'md', 'lg', 'xl' and only show the tips below the given screen size. Similar to the responsive table breakpoints. Omit this prop to always show.

Breached Passphrases

Use checkPwned | checked_pwned prop to enable checking against HaveIBeenPwned's API. As the passphrase is typed, it is checked against more than half a billion breached passwords, to help ensure its not compromised.
Should it fail, the feedback will express the passphrase is too common, prompting the user to change.
This uses their k-Anonymity model, so only the first 5 characters of a hashed copy of the passphrase are sent.




With Error

Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

With Options


Rich Text Editor







Toolbar Bottom





Blank Selection Text

Disabled Options

Disabled Select Field

Required Select Field

Equal option value and value text

Custom Select

Select w/ Error

Select w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

Select Inline

Select Inline Compact

Selectable Card


Default Selectable Cards are multi select by default.

Single Select

Single Select allows only one selectable card in the set to be selected.


Selectable Cards can pass text or block content.

With Options

Image Example

Selectable Cards can pass images with optional text.

Input Variant

What programming languages do you know?

How likely are you to recommend Playbook to a friend?

Selectable Cards can show an input indicating state.

With Errors

What sports do you like?

Selectable Card Icon



Single Select

With Options

Selectable Icon


Single Select

With Options

Selectable List


Radio variant

Text Input


First Name
Last Name
Phone Number
Email Address
Zip Code

With Error

Email Address
Please enter a valid email address
Confirm Email Address

Text Input w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).


Custom Input


Last Name

Add On

Add On With Defaults
Right-Aligned Add On With Border
Left-Aligned Add On With No Border
Left-Aligned Add On With Border
Right-Aligned Add On With No Border


Hover Over Text Below






Custom Textarea Input







Textarea w/ Error

This field has an error!

Textarea w/ Error shows that the radio option must be selected or is invalid (ie when used in a form it signals a user to fix an error).

Character Counter

Count Only
Max Characters
20 / 100
Max Characters w/ Blocker
100 / 100
Max Characters w/ Error
Too many characters!
94 / 75



Default State

Name and Value

Which of the following vehicles do you own?



Custom checkbox input

Custom radio inputs

Select one option:




Toggle w/ Options




Use the above input to search for users on Github, and see the results as you type.
When you make a selection, you will see it appear in the list below

With Context

Crayola Crayons

With Pills

Typeahead kit is data-driven. The minimum default fields are label and value.

This is an example of an option: { label: 'Windows', value: '#FFA500' }

Rails: Default Options

You can also pass default_options which will populate the initial pill selections:

default_options: [{ label: 'Windows', value: '#FFA500' }]

Rails: Subscribing to JS Events

JavaScript events are triggered based on actions you take within the kit such as selection, removal and clearing.
This kit utilizes a default id prop named react-select-input. It is highly advised to send your own unique id prop when using this kit to ensure these events do not unintentionally affect other instances of the kit in the same view. The examples below will use the unique id prop named typeahead-pills-example1:

pb-typeahead-kit-typeahead-pills-example1-result-option-select event to perform custom work when an option is clicked.
pb-typeahead-kit-typeahead-pills-example1-result-option-remove event to perform custom work when a pill is clicked.
pb-typeahead-kit-typeahead-pills-example1-result-option-clear event to perform custom work when all pills are removed upon clicking the X.

Rails: Publishing JS Events

The same rule regarding the id prop applies to publishing JS events. The examples below will use the unique id prop named typeahead-pills-example1:

pb-typeahead-kit-typeahead-pills-example1:clear event to clear all options.

With Pills (Async Data)

Rails: Providing the load_options Promise

*Additional required props: * async: true, pills: true

The prop load_options, when used in conjunction with async: true and pills: true, points to a JavaScript function located within the global window namespace. This function should return a Promise which resolves with the list of formatted options as described in prior examples above. This function is identical to the function provided to the React version of this kit. See the code example for more details.



*Additional required props: * async: true

As outlined in the react-select Async docs, loadOptions expects to return a Promise that resolves resolves with the list of formatted options as described in prior examples above. See the code example for more details.

getOptionLabel + getOptionValue

If your server returns data that requires differing field names other than label and value

See react-select docs for more information: https://react-select.com/advanced#replacing-builtins

With Pills (Async Data w/ Users)

If the data field imageUrl is present, FormPill will receive that field as a prop and display the image.


Multi Kit Options