8.0.0

Forms




Date Picker

Default


Hide Input Icon


Default Date


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


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.

Label


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.

onChange


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.

Range


Format


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

Disabled Dates


Min Max


Error


Flatpickr Methods


Hooks


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

Year Range


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

File Upload

Default List of files to upload


Accept only certain types of files


Form Group

Default


Button


Date Picker


Select


Selectable Card


Selectable Card Icon


Form Pill

Form Pill User


Form Pill Tag


Radio

Default


Custom


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).

Select

Default


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).

Selectable Card

Default


Default Selectable Cards are multi select by default.

Single Select


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

Block


Selectable Cards can pass text or block content.

Image Example


Selectable Cards can pass images with optional text.

Input Variant


Selectable Cards can show an input indicating state.

With Errors


Selectable Card Icon

Default


Checkmark


Single Select


Selectable Icon

Default


Single Select


Selectable List

Default


Radio variant


Text Input

Default


With Error


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


Disabled


Textarea

Default


Custom Textarea Input


Resize


Textarea w/ 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


Typeahead

Default


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.

React

loadOptions

*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.

With Pills (Async Data w/ Custom Options)


Use valueComponent props to pass your desire custom options. valueComponent will be displayed if present.

Toggle

Default State


Name and Value


Custom checkbox input


Custom radio inputs