TextInput

The regular variant uses the same value for placeholder and label, and has no extended label below.

Try writing in one of the inputs to see the label in action.

Default

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  placeholder='Placeholder Text'
5  value={inputValue}
6  onChange={yourChangeHandler}
7/>

Valid

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  isValid
5  placeholder='Placeholder Text'
6  value={inputValue}
7  onChange={yourChangeHandler}
8/>

Warning

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  isWarning
5  placeholder='Placeholder Text'
6  value={inputValue}
7  onChange={yourChangeHandler}
8/>

Error

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  isInvalid
5  placeholder='Placeholder Text'
6  value={inputValue}
7  onChange={yourChangeHandler}
8/>

The following variant takes a custom label as label instead of the placeholder, which in this cases works in the standard way, and has no extended label below.

Try writing in the input below to see the label in action.

Custom top label

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  customTopLabel='Custom Top Label'
5  placeholder='Placeholder Text'
6  value={inputValue}
7  onChange={yourChangeHandler}
8/>

The following variant takes an extended label which appears below. It can be displayed with success, info, warning, and danger styles.

Extended label: Default

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  placeholder='Placeholder Text'
5  bottomLabel='Bottom Label'
6  value={inputValue}
7  onChange={yourChangeHandler}
8/>

Extended label: Valid

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  isValid
5  placeholder='Placeholder Text'
6  bottomLabel='Bottom Label'
7  value={inputValue}
8  onChange={yourChangeHandler}
9/>

Extended label: Warning

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  isWarning
5  placeholder='Placeholder Text'
6  bottomLabel='Bottom Label'
7  value={inputValue}
8  onChange={yourChangeHandler}
9/>

Extended label: Invalid

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  isInvalid
5  placeholder='Placeholder Text'
6  bottomLabel='Bottom Label'
7  value={inputValue}
8  onChange={yourChangeHandler}
9/>

The prefix variant has a text prefix preceding the input area.

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  placeholder='Placeholder Text'
5  value={inputValue}
6  onChange={yourChangeHandler}
7/>

Since the prefix length may vary, a customPrefixPadding prop is available to allow setting a custom padding size to provide the necessary space for the prefix.

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  prefix="Averylongprefix"
5  customPrefixPadding='135px'
6  placeholder="Your address"
7  value={inputValue}
8  onChange={yourChangeHandler}
9/>

The required variant show a red wildcard next to the label.

Try writing in the input below to see the wildcard next to the label.

Required

1import TextInput from '@hummingbot/hbui/components/input/TextInput'
2
3<TextInput
4  required
5  placeholder='Placeholder Text'
6  value={inputValue}
7  onChange={yourChangeHandler}
8/>