TextInput
This component is used to allow input text for user
TextInput is used to enter small amount of text - name, address, email and etc. Do not forget to use placeholder
or label
prop of FormField to communicate its purpose.
This component is basic component for PasswordInput, NumberInput and Search. These components overrides some properties of TextInput to provide some features for different purposes.
Text Input Islands
Sometimes you want to improve your text field with extra functionality. For this case Altrone provides a great feature for TextInput customisation - TextInput Islands. You can add island to the left and right side of the text input.
There are four types of islands:
Text Island. This is just a text label. You can use them as hints or as prefixes and suffixes for inputed text. Also, TextInput has a shortcuts for this type of island: prefix
and suffix
. Content of this island has to be string.
Icon Island. Similar to text island, but shows icons instead of text labels. There are two shortcuts for this type of island: leftIcon
and rightIcon
. Content of this island has to be JSX.Element
Actions Island. Adds buttons as island to the text input. You have to provide array of InputIslandAction as content of this island.
Component Island. For any other cases you can render your own island. You have to provide array of JSX.Element as content of the island.
InputIslandType
InputIsland
InputIslandAction
Suggestions
This feature is available only in Altrone 2.0 and later
In Altrone 2.0 TextInput got some new features. Suggestions is one of them. Now you can pass an array with all possible options to the TextInput and when user types something in the field he can see the dropdown with suitable options and choose one of them.
Even when user has a list of suggestion he still can type everything what he wants. If you don't want it you should use Select with searchable
prop.
Live Suggestions
This feature is available only in Altrone 2.0 and later
This feature is a continuation of the idea of suggestions for TextInput. When this feature is enabled when user types something in the input he also see the selected suggestion right in the text box.
Also he can press on Tab
button to fill with the rest text.
You can't use useLiveSuggestion
without suggestions
props
Properties extends Omit<React.HTMLProps, 'value' | 'onChange' | 'size' | 'ref'>
History
Altrone 2.0
:added
loading
propadded
children
propadded
suggestions
propadded
useLiveSuggestions
propadded
surface
propadded
elevation
prop
Altrone 1.0
: initial release
Last updated