Typeahead

Typeahead is auto suggestion or completion based on what the user is starting to type, gets refined as the user types more.

Default

user



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.

Without Pills (Single Select)


Passing is_multi: false will allow the user to only select one option from the drop down. Note: this will disable pills prop.

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.

Inline


Multi Kit Options


Error State


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


Things to Avoid

Avoid using on questionaires, surverys, text input and textarea when users answers/inputs will be individualized.


Available Props

Props Type Values

max_width

array
xs
sm
md
lg
xl
xxl
0
none

z_index

array
1
2
3
4
5
6
7
8
9
10

number_spacing

array
tabular

shadow

array
none
deep
deeper
deepest

line_height

array
tightest
tighter
tight
normal
loose
looser
loosest

display

array
block
inline_block
inline
flex
inline_flex
none

cursor

array
auto
default
none
contextMenu
help
pointer
progress
wait
cell
crosshair
text
verticalText
alias
copy
move
noDrop
notAllowed
grab
grabbing
eResize
nResize
neResize
nwResize
sResize
seResize
swResize
wResize
ewResize
nsResize
neswResize
nwseResize
colResize
rowResize
allScroll
zoomIn
zoomOut

flex_direction

array
row
column
rowReverse
columnReverse

flex_wrap

array
wrap
nowrap
wrapReverse

justify_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

justify_self

array
auto
start
end
center
stretch

align_items

array
flexStart
flexEnd
start
end
center
baseline
stretch

align_content

array
start
end
center
spaceBetween
spaceAround
spaceEvenly

align_self

array
auto
start
end
center
stretch
baseline

flex

array
auto
initial
0
1
2
3
4
5
6
7
8
9
10
11
12
none

flex_grow

array
1
0

flex_shrink

array
1
0

order

array
1
2
3
4
5
6
7
8
9
10
11
12

position

array
relative
absolute
fixed
sticky

hover

array

border_radius

array
none
xs
sm
md
lg
xl
rounded

text_align

array
start
end
left
right
center
justify
justify-all
match-parent

overflow

array
visible
hidden
scroll
auto

truncate

array
1
2
3
4
5

overflow_x

array
visible
hidden
scroll
auto

overflow_y

array
visible
hidden
scroll
auto

margin

array
none
xxs
xs
sm
md
lg
xl

margin_bottom

array
none
xxs
xs
sm
md
lg
xl

margin_left

array
none
xxs
xs
sm
md
lg
xl

margin_right

array
none
xxs
xs
sm
md
lg
xl

margin_top

array
none
xxs
xs
sm
md
lg
xl

margin_x

array
none
xxs
xs
sm
md
lg
xl

margin_y

array
none
xxs
xs
sm
md
lg
xl

padding

array
none
xxs
xs
sm
md
lg
xl

padding_bottom

array
none
xxs
xs
sm
md
lg
xl

padding_left

array
none
xxs
xs
sm
md
lg
xl

padding_right

array
none
xxs
xs
sm
md
lg
xl

padding_top

array
none
xxs
xs
sm
md
lg
xl

padding_x

array
none
xxs
xs
sm
md
lg
xl

padding_y

array
none
xxs
xs
sm
md
lg
xl

classname

string

dark

boolean

data

hashprop

aria

hashprop

children

proc
Props Type Values Default

id

string

async

boolean
false

default_options

hasharray

error

string

get_option_label

string

get_option_value

string

inline

boolean
false

label

string

load_options

string

multi_kit

string

name

string

options

hasharray

input_options

hashprop

is_multi

boolean
true

pills

boolean
false

placeholder

string

plus_icon

boolean
false

search_term_minimum_length

string
3

search_debounce_timeout

string
250

value

string