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.
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.
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.
Strength is calculated on a 0-4 scale by the Zxcvbn package.
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.
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.
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.
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.
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 will display in the order they are listed with the first country preselected, and all non-preferred countries listed alphabetically below in the remaining dropdown.
Setting an initial country preselects that country within the input as well as the country dropdown.
Limiting countries removes all countries from the dropdown except your selections.
Excluding countries removes the selected countries from the dropdown.
NOTE: the number in the React onChange event will not include formatting (no spaces, dashes, and parentheses). For Rails, the value will include formatting and its value must be sanitized manually.
Ignore any irrelevant characters and cap the length at the maximum valid number length.
This can be combined with format_as_you_type / formatAsYouType.
Set country_search / countrySearch to true to allow users to search for a specific Country within the dropdown. If the range of countries has been limited, only the selected countries will be searchable.
Add an id to your Text Input so that clicking the label will move focus directly to the input.
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).
The mask prop lets you style your inputs while maintaining the value that the user typed in.
It uses a hidden input field to submit the unformatted value as it will have the proper name attribute. It will also copy the id field with a "#{your-id-sanitized}"
Set this prop to false or "off" to remove autocomplete from text inputs. You can also set it to a string, but browsers will often defer to other attributes like name.
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).
Grouped options can be rendered via structuring the options in the way shown in the code snippet below.
The optional default_options prop can be used to set a default value for the kit. When a default value is set, focus will be automatically set to the selected option and the dropdown container will scroll to bring the selected option into view.
Typeahead kit is data-driven. The minimum default fields are label and value.
This is an example of an option: { label: 'Windows', value: '#FFA500' }
You can also pass default_options which will populate the initial pill selections:
default_options: [{ label: 'Windows', value: '#FFA500' }]
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.
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.
Passing is_multi: false will allow the user to only select one option from the drop down. Note: this will disable pills prop.
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.
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
If the data field imageUrl is present, FormPill will receive that field as a prop and display the image.
Typeahead w/ Error shows that an option must be selected or the selected option is invalid (i.e., when used in a form it signals a user to fix an error).
Change the form pill color by passing the optional pill_color prop. Product, Data, and Status colors are available options. Check them out here in the Form Pill colors example.
For Form Pills with longer text, the truncate global prop can be used to truncate the label within each Form Pill. Hover over the truncated Form Pill and a Tooltip containing the text or tag section of the Form Pill will appear. See here for more information on the truncate global prop.
You can also set up a typeahead to render options dynamically based on input from a select. To achieve this:
idsearch_context_selector prop on the typeahead. The value here must match the id of the select so the Typeahead knows where to read the current "context" from.options_by_context to pass in a hash whose keys match the possible values of your “context” select. Each key maps to an array of { label, value } objects. The typeahead automatically displays only the subset of options matching the current context.clear_on_context_change prop controls whether the typeahead clears or not when a change happens in the linked select. This prop is set to true by default so that whenever a selection is made in the select, the Typeahead automatically clears its current input/selection.The dynamic rendering of options for the typeahead can also be achieved with a pure Rails implementation (not react rendered). For this implementation, use all the props as above with the following additions:
search_term_minimum_length: this sets the minimum input in the typeahead needed to display the dropdown. This is set to 3 by default. Set it to 0 for the dropdown to always display when the typeahead is interacted with. By default, text is not preserved in the typeahead kit when you click off of the input field. You can utilize the preserve_search_input prop in order to prevent text from being cleared when the field loses focus
