Getting started
Foundation
Typography
Navigation
Feedback
Forms
Tag input presents user with a set of options and allows to select one of them.
Tag input should be disabled, when user shouldn't be allowed to interact with it.
Mark tag input as loading, when options are fetched on the fly and are not yet available.
Invalid tag input indicates that current value isn't what the system expects.
Options can display an additional accessory view before the label. You can show an image using an image accessory. This is useful for showing logos when selecting sources or destinations, for example.
Image accessory can also indicate a status of the related resource. For example, this would be useful for sync statuses.
Allowed values are the same as in status indicator.
Tag input allows user to create a new option on the fly, when no suitable option exists.
For that, enable supportsCreatableOptions
and set an onCreateOption
function that will handle creation of options.
Options can be created asynchronously, but you need to handle loading state yourself via isLoading
prop.
You don't have to create objects with label
and value
keys as shown in the examples above.
TagInput
supports any objects, as long as you provide a label and value for each option via optionLabel
and optionValue
functions.
There's a version of TagInput
called GroupedTagInput
, that supports groups of options.
Name | Default | Description |
---|---|---|
isDisabled | — | boolean Determines if select is disabled. |
isLoading | — | boolean Indicates that options are being loaded. |
isInvalid | — | boolean Indicates that select is in invalid state. |
isOptionDisabled | — | (option: Option) => boolean Function to determine whether an option should be disabled. |
emptyOptionsMessage | "No options" | string Text to show inside a dropdown when there are no options. |
supportsCreatableOptions | — | boolean Determines if user is allowed to create a new option, if it's not present already. |
createOptionMessage | "Create "[input value]"" | (inputValue: string) => string Text to show inside dropdown when creating a new option. |
options | — | Option[] Available options. `Option` is a generic, so type of options will be inferred. |
optionLabel | — | (option: Option) => string Function to extract label from an option. If it's not provided, `label` field will be used as a label. |
optionValue | — | (option: Option) => OptionValue Function to extract value from an option. If it's not provided, `value` field will be used as a value. |
optionAccessory | — | (option: Option) => TagAccessory Function to show an accessory view near the option label. |
placeholder | — | string Text to show inside select when no option is selected. |
value | — | OptionValue[] Selected options |
width | "xs" | "xs" | "sm" | "md" | "lg" | "xl" | "auto" | "100%" Tag input width. |
onChange | — | (value: OptionValue[]) => void Callback for when user selects a different option or clears the selection. |
onCreateOption | — | (inputValue: string) => Promise<void> | void Callback for creating a new option. It can be async. |
Name | Default | Description |
---|---|---|
isDisabled | — | boolean Determines if select is disabled. |
isLoading | — | boolean Indicates that options are being loaded. |
isInvalid | — | boolean Indicates that select is in invalid state. |
isOptionDisabled | — | (option: Option) => boolean Function to determine whether an option should be disabled. |
emptyOptionsMessage | "No options" | string Text to show inside a dropdown when there are no options. |
supportsCreatableOptions | — | boolean Determines if user is allowed to create a new option, if it's not present already. |
createOptionMessage | "Create "[input value]"" | (inputValue: string) => string Text to show inside dropdown when creating a new option. |
optionGroups | — | Array<{
label: string;
options: Option[];
}> Available options. `Option` is a generic, so type of options will be inferred. |
optionLabel | — | (option: Option) => string Function to extract label from an option. If it's not provided, `label` field will be used as a label. |
optionValue | — | (option: Option) => OptionValue Function to extract value from an option. If it's not provided, `value` field will be used as a value. |
optionAccessory | — | (option: Option) => TagAccessory Function to show an accessory view near the option label. |
placeholder | — | string Text to show inside select when no option is selected. |
value | — | OptionValue[] Selected options |
width | "xs" | "xs" | "sm" | "md" | "lg" | "xl" | "auto" | "100%" Tag input width. |
onChange | — | (value: OptionValue[]) => void Callback for when user selects a different option or clears the selection. |
onCreateOption | — | (inputValue: string) => Promise<void> | void Callback for creating a new option. It can be async. |