12.24.0

Forms




Checkbox

Default


Load as checked


Custom Checkbox


Default w/ Error


Checkbox w/ Options


Indeterminate Checkbox


Date Picker

Default

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.

Allow Input

Date Picker

Setting the allowInput prop to true permits users to key values directly into the input. This prop is set to false by default.

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.

Label

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.

Range

Date Picker

Format

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

Error

Date Picker
Invalid date. Please pick a valid date.

Flatpickr Methods


Hooks

onChange
onOpen

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.

Anti-Patterns

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

Inline

Date Picker

Month & Year Only

Date Picker

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.

Week

Date Picker

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.

Time Selection

Date Picker

To select time as well, you should pass the enableTime boolean prop. You can also enable timezone display by passing showTimezone.

Custom Positions

Datepicker (opens on the right)
Datepicker (opens on the left)
Datepicker (opens above on the left)
Datepicker (opens below on the right)

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.

Affix Datepicker Upon Scrolling

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

Custom Position (based on element)

๐Ÿ‘‹ Datepicker will position from here based on ID.
Datepicker (opens on the right)
๐Ÿ‘‹ Datepicker will position from here based on class name.
Datepicker (opens on the right)

Form

Default


Default + Validation


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

Form Group

Default

First Name
Middle Intial
Last Name

Button

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
Event Date

Select

Artist

Selectable Card


Selectable Card Icon


Form Pill

Form Pill User

Anna Black

Anna Black



Anna Black


Form Pill Size

Anna Black

Anna Black



Anna Black


Form Pill Tag

this is a tag


Example

THIS IS A TAG


By default textTransform = "none". If there is a need to enforce lowercase, please pass the textTransform = "lowercase prop.

Multi Level Select

Default


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 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, the array of checked items is attached to the DOM in a data attribute titled data-tree on the wrapping div around the MultiLevelSelect.

Return All Selected


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.

Passphrase

Default


Confirmation


Meter Settings

hello
Calculated Strength
hello
hello
hello
hello

This example shows how to enhance the passphrase strenght by setting diferent thresholds and lengths.

The meterSettings array contains different settings for each rendered input. The handleStrengthCalculation handles the strength calculation using those settings, showing different results for the same passphrase input.

By default, minLength is 12. Try typing any value in the Default Example input. Notice that the bar won't change from red until the minimum is met.

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.

Disclaimer

This example depends on the zxcvbn library.

You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.

Input Props


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

Tips


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.

Strength Change

hello
Passphrase Strength

Strength is calculated on a 0-4 scale by the Zxcvbn package.

Disclaimer

This example depends on the zxcvbn library.

You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.

Common Passphrases

hello

Disclaimer

This example depends on the zxcvbn library.

You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.

Breached Passphrases

hello

Use HaveIBeenPwned's API to check for breached passwords.

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.

Disclaimer

This example depends on the zxcvbn library and haveibeenpwned API.

You can use any library to achieve the same result, this example only intends to show how to add more features to the Passphrase kit.

Phone Number Input

Default


NOTE: Error state is handled by default, validating length (too long or too short) relative to the selected countryโ€™s phone format and enforcing numeric-only values for all countries.

Preferred Countries


Preferred countries will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below a section separator within the remaining dropdown.

Initial Country


Setting an initial country preselects that country within the input as well as the country dropdown.

Limited Countries


Limiting countries removes all countries from the dropdown except your selections.

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

With Options


Alignment


Rich Text Editor

Default


Simple


Attributes


Focus



Sticky


Templates


Toolbar Bottom


Inline


Preview


Select

Default


Blank Selection Text