The TextInput element is used by the TextInput component. Use the TextInput element directly for custom scenarios.

Import input element

1import { TextInput } from '@tempoplatform/tpds/elements/input'
2
3const [inputValue, setInputValue] = React.useState('')

Default

1<TextInput
2  value={inputValue}
3  placeholder='Placeholder'
4  onChange={(e) => setInputValue(e.target.value)}
5/>

Valid

1<TextInput
2  isValid
3  value={inputValue}
4  placeholder='Placeholder'
5  onChange={(e) => setInputValue(e.target.value)}
6/>

Invalid

1<TextInput
2  isInvalid
3  value={inputValue}
4  placeholder='Placeholder'
5  onChange={(e) => setInputValue(e.target.value)}
6/>

Warning

1<TextInput
2  isWarning
3  value={inputValue}
4  placeholder='Placeholder'
5  onChange={(e) => setInputValue(e.target.value)}
6/>