") center/100% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-checked[disabled]{background:#3d8feb url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-checked:focus{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-checked:hover{background:#1671d7 url("data:image/svg+xml;utf8, ") center/100% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;}.b-checkbox.b-checkbox-mixed[disabled]{background:#3d8feb linear-gradient(to bottom, #3d8feb 0%, #3d8feb calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #3d8feb calc(50% + 1px), #3d8feb 100%) center / 50% 50% no-repeat;border-color:#000;cursor:not-allowed;opacity:.3}.b-checkbox.b-checkbox-mixed:focus{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-checkbox.b-checkbox-mixed:hover{background:#1671d7 linear-gradient(to bottom, #1671d7 0%, #1671d7 calc(50% - 1px), #000 calc(50% - 1px), #000 calc(50% + 1px), #1671d7 calc(50% + 1px), #1671d7 100%) center / 50% 50% no-repeat;border-color:#000}.b-dialog-wrapper{line-height:0;position:absolute;top:0;left:0;z-index:9999}.b-dialog{background:#fff;border:1px solid transparent;border-radius:2px;box-shadow:1px 2px 3px transparent;color:#111;line-height:1.5;padding:1.5rem;}.b-dialog *:last-child{margin-bottom:0}.b-text{white-space:nowrap}.b-image{background:#ccc;background-size:cover;background-position:center;border:0;display:inline-block;line-height:0;position:relative;height:auto;width:100%}.b-image::after,.b-image-loading::before,.b-image-error::before{content:'';display:block;padding-top:100%;width:100%}.b-image-loading::before,.b-image-error::before{position:absolute;top:0;bottom:0;left:0;right:0}.b-image-loading{background:#ccc;}.b-image-loading::before{background:#979fa8;background:url("data:image/gif;base64,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") no-repeat center}.b-image-error{background:#ccc;}.b-image-error::before{background:url("data:image/svg+xml;charset=utf8, ") no-repeat center}.b-input-wrapper{font-size:.75rem;position:relative;width:100%}.b-input{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:transparent;border:1px solid transparent;border-radius:2px;color:#c5cfdb;font-family:inherit;font-size:inherit;font-weight:inherit;line-height:inherit;margin:0;padding:.75em;position:relative;z-index:1;width:100%;transition:all 200ms ease;}.b-input + .b-input-placeholder{background:#272b33;border-color:transparent;color:rgba(197,207,219,0.5)}.b-input[disabled]{color:#c5cfdb;cursor:not-allowed;opacity:.3;}.b-input[disabled] + .b-input-placeholder,.b-input[disabled]:active + .b-input-placeholder,.b-input[disabled]:focus + .b-input-placeholder,.b-input[disabled]:hover + .b-input-placeholder{background:#272b33;border-color:transparent}.b-input:active{color:#c5cfdb;}.b-input:active + .b-input-placeholder{background:#272b33;border-color:#3d8feb}.b-input:focus{color:#c5cfdb;}.b-input:focus + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input:hover{color:#c5cfdb;}.b-input:hover + .b-input-placeholder{background:#272b33;border-color:rgba(51,51,51,0)}.b-input-placeholder{overflow:hidden;position:absolute;top:0;left:0;bottom:0;right:0;white-space:nowrap;text-overflow:ellipsis;z-index:0}.b-modal-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:center;-ms-flex-align:center;align-items:center;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;overflow:auto;position:fixed;top:0;left:0;right:0;bottom:0;z-index:999;}.b-modal-wrapper .b-dialog-wrapper{-ms-flex-negative:0;flex-shrink:0;max-width:80vw;position:relative}.b-modal-wrapper .b-dialog{background:#fff;border:1px solid #e6e6e6;box-shadow:1px 2px 3px transparent;color:#111}.b-modal-mask{background:rgba(39,43,51,0.9);position:fixed;top:0;left:0;right:0;bottom:0}.b-pagination-control.b-segmented-control-option.b-button{background:transparent;border-color:transparent;color:#979fa8;}.b-pagination-control.b-segmented-control-option.b-button[disabled],.b-pagination-control.b-segmented-control-option.b-button[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button[disabled]:hover{background:transparent;border-color:transparent;color:#979fa8}.b-pagination-control.b-segmented-control-option.b-button:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button:focus{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button:hover{background:transparent;border-color:transparent;color:#cbcfd3}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected{background:transparent;border-color:transparent;color:#fff;}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled],.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:active,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:focus,.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]:hover{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:active{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus{background:transparent;border-color:transparent;color:#fff}.b-pagination-control.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:transparent;border-color:transparent;color:#fff}.b-popover{-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;}.b-popover .b-dialog{background:#272b33;border:1px solid #000;box-shadow:1px 2px 3px transparent;color:#c5cfdb}.b-popover-caret{position:relative;-webkit-transform-origin:center;transform-origin:center;height:16px;width:16px}.b-popover-caret-border{fill:#3d8feb}.b-popover-caret-fill{fill:#3d8feb}.b-popover-anchor-y-start.b-popover-self-y-end .b-popover-caret{margin-top:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(180deg);transform:rotate(180deg)}.b-popover-anchor-y-end.b-popover-self-y-start .b-popover-caret{margin-bottom:-3px}.b-popover-anchor-x-start.b-popover-self-x-end{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-start.b-popover-self-x-end .b-popover-caret{margin-left:-3px;-webkit-box-ordinal-group:3;-ms-flex-order:2;order:2;-webkit-transform:rotate(90deg);transform:rotate(90deg)}.b-popover-anchor-x-end.b-popover-self-x-start{-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;}.b-popover-anchor-x-end.b-popover-self-x-start .b-popover-caret{margin-right:-3px;-webkit-transform:rotate(-90deg);transform:rotate(-90deg)}.b-progress-wrapper{border:1px solid #3d8feb;border-radius:2px;overflow:hidden;position:relative;height:30px;width:100%}.b-progress-wrapper[data-progress]::before{color:#fff;content:attr(data-progress);line-height:30px;padding-left:10px;position:relative;text-align:left;z-index:1}.b-progress{background:#3d8feb;position:absolute;top:0;left:0;bottom:0}.b-progress-indeterminate{background:#3d8feb;border-color:#3d8feb;top:0;left:0;bottom:0;right:0;-webkit-animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;animation:interdeterminate-progress-bar 2.5s ease-in-out alternate infinite;}.b-progress-indeterminate ~ .b-progress-label{color:#fff}@-webkit-keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}@keyframes interdeterminate-progress-bar{from{opacity:0}to{opacity:1}}.b-disclosure-toggle{color:#c5cfdb;cursor:pointer;display:inline-block;font-size:.75rem;padding-left:15px;position:relative;}.b-disclosure-toggle::before{content:'';border-width:5px;border-color:transparent;border-left-color:#c5cfdb;border-style:solid;position:absolute;margin-top:-5px;top:50%;left:4px}.b-disclosure-expanded{color:#c5cfdb;}.b-disclosure-expanded > .b-disclosure-toggle::before{border-top-color:#c5cfdb;border-left-color:transparent;margin-top:-3px;left:0}.b-disclosure-content{margin-top:.5rem;width:100%}.b-radio-wrapper{display:-webkit-box;display:-ms-flexbox;display:flex}.b-radio,.b-radio-label{cursor:pointer}.b-radio{-webkit-appearance:none;-moz-appearance:none;appearance:none;background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border:1px solid #c5cfdb;border-radius:50%;-ms-flex-negative:0;flex-shrink:0;margin:1px 3px 0;padding:0;height:16px;width:16px;transition:all 200ms ease;}.b-radio[disabled],.b-radio[disabled]:active,.b-radio[disabled]:focus,.b-radio[disabled]:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#c5cfdb;cursor:not-allowed;opacity:.3}.b-radio:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio:focus{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio:hover{background:radial-gradient(circle at center,transparent 0%,transparent calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#fff}.b-radio.b-radio-selected,.b-radio.b-radio-selected:hover,.b-radio.b-radio-selected:focus,.b-radio.b-radio-selected:active{background:radial-gradient(circle at center,#3d8feb 0%,#3d8feb calc(100% - 5px),transparent calc(100% - 5px),transparent 100%);border-color:#3d8feb}.b-radio-label{line-height:1.2;margin-left:.25em}.b-segmented-control{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center}.b-segmented-control-option.b-button{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;background:#535a66;border:1px solid transparent;border-radius:0;color:#fff;cursor:pointer;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;font-size:14px;margin:0;padding:.5em .75em;text-align:center;white-space:nowrap;transition:all 200ms ease;}.b-segmented-control-option.b-button:first-of-type{border-top-left-radius:2px;border-bottom-left-radius:2px}.b-segmented-control-option.b-button:last-of-type{border-top-right-radius:2px;border-bottom-right-radius:2px}.b-segmented-control-option.b-button:not(:first-of-type){margin-left:-1px}.b-segmented-control-option.b-button[disabled],.b-segmented-control-option.b-button[disabled]:active,.b-segmented-control-option.b-button[disabled]:focus,.b-segmented-control-option.b-button[disabled]:hover,.b-segmented-control-option.b-button.b-segmented-control-option-selected[disabled]{background:#282d33;border-color:transparent;color:#fff;opacity:.3}.b-segmented-control-option.b-button:focus{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:hover{background:#666d7a;border-color:transparent;color:#fff}.b-segmented-control-option.b-button:active,.b-segmented-control-option.b-button.b-segmented-control-option-selected,.b-segmented-control-option.b-button.b-segmented-control-option-selected:focus,.b-segmented-control-option.b-button.b-segmented-control-option-selected:hover{background:#282d33;border-color:transparent;color:#fff}.b-segmented-control-option.b-button.b-segmented-control-option-selected{z-index:1}.b-tokenfield-wrapper{background:#272b33;border:1px solid transparent;border-radius:2px;display:-webkit-box;display:-ms-flexbox;display:flex;font-size:.75rem;}.b-tokenfield-wrapper .b-typeahead-wrapper{background:transparent;border:0;-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-tokenfield-wrapper .b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-tokenfield-wrapper .b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-tokenfield-wrapper .b-typeahead,.b-tokenfield-wrapper .b-typeahead-hint{-ms-flex-item-align:stretch;-ms-grid-row-align:stretch;align-self:stretch;padding:10px}.b-tokenfield{display:-webkit-box;display:-ms-flexbox;display:flex}.b-tokenfield-tokens{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-negative:0;flex-shrink:0;margin:5px 0 5px 5px;}.b-tokenfield-tokens:empty{margin:0}.b-tokenfield-token{-webkit-box-align:center;-ms-flex-align:center;align-items:center;-ms-flex-item-align:stretch;align-self:stretch;background:transparent;border:1px solid #4b5363;border-radius:2px;color:#c5cfdb;cursor:pointer;display:-webkit-box;display:-ms-flexbox;display:flex;line-height:1;margin-right:5px;padding:5px 10px;white-space:nowrap;transition:all 200ms ease-in-out;}.b-tokenfield-token:focus{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:focus .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:hover{background:transparent;border-color:rgba(51,51,51,0);color:#c5cfdb;}.b-tokenfield-token:hover .b-tokenfield-token-close{color:#c5cfdb}.b-tokenfield-token:active{background:transparent;border-color:#3d8feb;color:#c5cfdb}.b-tokenfield-token:last-child{margin-right:0}.b-tokenfield-token.b-tokenfield-token-selected{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected .b-tokenfield-token-close{color:rgba(255,255,255,0.5)}.b-tokenfield-token.b-tokenfield-token-selected:focus{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:focus .b-tokenfield-token-close{color:#fff}.b-tokenfield-token.b-tokenfield-token-selected:hover{background:#3d8feb;border-color:#4b5363;color:#fff;}.b-tokenfield-token.b-tokenfield-token-selected:hover .b-tokenfield-token-close{color:#fff}.b-tokenfield-token-close{color:rgba(197,207,219,0.5);cursor:pointer;display:inline-block;font-size:.85em;margin-left:.5rem;transition:all 200ms ease-in-out}.b-typeahead-wrapper{background:#272b33;border:1px solid transparent;font-size:.75rem;position:relative;}.b-typeahead-wrapper .b-input{color:#c5cfdb;}.b-typeahead-wrapper .b-input + .b-input-placeholder{background:transparent;border-color:transparent;color:rgba(197,207,219,0.5)}.b-typeahead-wrapper .b-input[disabled]{color:#c5cfdb;opacity:.3;}.b-typeahead-wrapper .b-input[disabled] + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:active + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:focus + .b-input-placeholder,.b-typeahead-wrapper .b-input[disabled]:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:active{color:#c5cfdb;}.b-typeahead-wrapper .b-input:active + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:focus{color:#c5cfdb;}.b-typeahead-wrapper .b-input:focus + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-wrapper .b-input:hover{color:#c5cfdb;}.b-typeahead-wrapper .b-input:hover + .b-input-placeholder{background:transparent;border-color:transparent}.b-typeahead-match-wrapper{background:#272b33;border-bottom-left-radius:2px;border-bottom-right-radius:2px;border:1px solid #000;margin-top:-1px;max-height:300px;overflow:hidden;overflow-y:auto;position:absolute;left:0;right:0;top:100%;z-index:99}.b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match{background:#272b33;color:#b3b3b3;cursor:pointer;font-size:13px;line-height:1;padding:.25em .5em;}.b-typeahead-match:focus{background:#272b33;color:#b3b3b3;}.b-typeahead-match:focus .b-typeahead-match-highlight{background:#272b33;color:#fff}.b-typeahead-match:hover{background:#1f2229;color:#b3b3b3;}.b-typeahead-match:hover .b-typeahead-match-highlight{background:#1f2229;color:#fff}.b-typeahead-match.b-typeahead-match-selected,.b-typeahead-match.b-typeahead-match-selected:focus,.b-typeahead-match.b-typeahead-match-selected:hover{background:#3d8feb;color:#ccc;}.b-typeahead-match.b-typeahead-match-selected .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:focus .b-typeahead-match-highlight,.b-typeahead-match.b-typeahead-match-selected:hover .b-typeahead-match-highlight{background:#3d8feb;color:#fff}.demo-loose-list > *:not(:last-child)::after{content:', '}.tall-button{height:50px}.checkbox-group-demo{-webkit-columns:3;-moz-columns:3;columns:3}@media all and (max-width:600px){.checkbox-group-demo{-webkit-columns:2;-moz-columns:2;columns:2}}.b-checkbox:focus{outline:0}.dialog-demo-close-button{background:none !important;border:0;color:#ccc;cursor:pointer;line-height:1;padding:.5rem;position:absolute;top:0;right:0;transition:color 200ms ease;}.dialog-demo-close-button:hover,.dialog-demo-close-button:focus{color:#555}.dialog-demo-close-button:active{color:#c5cfdb}.dialog-demo-close-button::before{content:'X'}.demo-image figure:not(:first-child){margin-left:5px}.demo-image figure:not(:last-child){margin-right:5px}.demo-modal h3{color:inherit;margin-top:0}.demo-modal-cancel-button,.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{background:#3d8feb;border-color:transparent;color:#fff}.demo-modal-cancel-button:hover,.demo-modal-cancel-button:focus{opacity:.8}.demo-pagination .b-segmented-control-option-selected{font-weight:700}.demo-pagination .b-pagination-item{display:-webkit-box;display:-ms-flexbox;display:flex;height:7em;margin:0;padding:1rem;}.demo-pagination .b-pagination-item + .b-pagination-item{border-top:1px solid #979fa8}.demo-pagination .b-pagination-item .card-left{-ms-flex-preferred-size:50%;flex-basis:50%}.demo-pagination .b-pagination-item .card-right{-ms-flex-preferred-size:50%;flex-basis:50%;font-size:11pt}.demo-pagination .b-pagination-item .card-left strong{font-size:18pt}@media all and (max-width:800px){.demo-pagination .b-pagination-control{padding-left:.25em;padding-right:.25em}.demo-pagination .b-pagination-control-custom{display:none}.demo-pagination .b-pagination-item{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:auto}}.demo-popover .b-dialog{outline:0}.demo-popover .b-dialog-body{padding:0}.demo-popover.b-popover-anchor-y-start.b-popover-self-y-end .b-dialog{border-bottom:3px solid #3d8feb}.demo-popover.b-popover-anchor-y-end.b-popover-self-y-start .b-dialog{border-top:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-start.b-popover-self-x-end .b-dialog{border-right:3px solid #3d8feb}.demo-popover.b-popover-anchor-x-end.b-popover-self-x-start .b-dialog{border-left:3px solid #3d8feb}@media (max-width:600px){.demo-popover{max-width:75vw}}.progress-demo > *{-ms-flex-item-align:start;align-self:flex-start;margin:0 1em}.progress-demo > :first-child{margin-left:0}.progress-demo > :last-child{margin-right:0}#progress-meter .b-progress{position:absolute;right:0;left:0;bottom:0;top:auto}#progress-meter[data-progress]::before{text-align:center;position:absolute;left:0;right:0;z-index:1}
View Source TokenizedInput Distill rich entity data matched via typeahead input into simple visual abstractions.
Basic usage of this component is identical to that of Typeahead . Additional props are available to take
advantage of the tokenization functionality.
Installation# npm i --save boundless-tokenized-input
TokenizedInput can also just be directly used from the main Boundless library. This is recommended when you're getting started to avoid maintaining the package versions of several components:
npm i boundless --save
the ES6 import
statement then becomes like:
import { TokenizedInput } from 'boundless' ;
Demo Enter a country you'd like to visit:
Component Instance Methods# When using TokenizedInput
in your project, you may call the following methods on a rendered instance of the
component. Use refs
to get the instance.
add(index: number)
programmatically creates a token for props.entities[index]
; props.handleAddToken
will be called as a hint to
persist the change in * your controller view or other application state
focus()
focuses the browser oon the underlying textual input for immediate text entry
getInputNode()
returns the raw underlying textual input DOM node
getSelectedEntityText()
returns the text
property of the currently highlighted entity (from props.entities
), or returns an empty string
getValue()
retrieves the current value of the underlying textual input
remove(index: number)
programmatically removes the token for props.entities[index]
; props.handleRemoveTokens
will be called as a hint
to persist the * change in your controller view or other application state
select()
programmatically creates a full selection on the underlying textual input such that a press of the Backspace key
would fully clear the * input
setValue(value: string)
sets the underlying textual input to the specified text and updates internal state; do not use this method when
using Typeahead
as a "controlled input"
Props# Required Props# There are no required props.
Optional Props# Name Implementation Description *
Expects any
any React-supported attribute
algorithm
Expects Typeahead.mode.STARTS_WITH or
Typeahead.mode.FUZZY or object
Default Value Typeahead. mode. FUZZY
the mechanism used to identify and mark matching substrings; a custom set can be provided as an object
(see the properties below)
clearOnSelection
Expects bool
Default Value false
if true
, clears the input text when a (partial) match is selected
component
Expects string
Default Value 'div'
overrides the HTML container tag
entities
Expects arrayOf(object)
Default Value [ ]
an array of objects that user input is filtered against; at a minimum, each object must have a text
property and any other supplied property is passed through to the resulting DOM element
text
Expects string
the text to be used to do string comparison and match against
handleAddToken
Expects function
Default Value ( ) = > { }
function handler that is called when an entity is selected by the user and a token should be created
handleNewSelection
Expects function
Default Value ( ) = > { }
function handler that is called when one or more tokens are selected by the user via click or keyboard
actions; called with what the new selection should be
handleRemoveTokens
Expects function
Default Value ( ) = > { }
function handler that is called when one or more tokens are removed by the user via clicking the "close"
button or pressing the Backspace
key while tokens are selected
hidePlaceholderOnFocus
Expects bool
Default Value true
triggers the placeholder to disappear when the input field is focused, reappears when the user has tabbed away or focus is moved
hint
Expects bool
Default Value null
renders a disabled textfield with the full text of the currently selected input hint; will remain blank
if the matched substring is not at the beginning of the user input
hintProps
Expects object
Default Value { }
*
Expects any
any React-supported attribute
inputProps
Expects object
Default Value {
type: 'text' ,
}
*
Expects any
any React-supported attribute
defaultValue
Expects string
onBlur
Expects function
onFocus
Expects function
onChange
Expects function
placeholder
Expects string
type
Expects string
value
Expects string
matchWrapperProps
Expects object
Default Value { }
*
Expects any
any React-supported attribute
offscreenClass
Expects string
Default Value 'b-offscreen'
the "offscreen" class used by your application; specifically to retain ARIA navigability as display: none
excludes the
element from consideration
onComplete
Expects function
Default Value ( ) = > { }
called when the user presses Enter
with no autosuggest hint available, indicating that input is complete
onEntityHighlighted
Expects function
Default Value ( ) = > { }
called with the index of the highlighted entity due to keyboard selection
onEntitySelected
Expects function
Default Value ( ) = > { }
called with the index of the entity selected by the user
tokenCloseComponent
Expects ReactElement
Default Value < div> X< / div>
the JSX used for the close button itself
tokenCloseVisible
Expects bool
Default Value true
determines if the .b-tokenfield-token-close
element should be rendered for each token
tokens
Expects arrayOf(number)
Default Value [ ]
the indexes of entities that should be rendered as "tokens" in the component UI
tokensSelected
Expects arrayOf(number)
Default Value [ ]
the indexes of tokenized entities that are part of an active selection; the user can press Backspace
to
trigger handleRemoveTokens