Components
Text Input
Field to enter and submit textual input.
Import TextInput
Tremor exports one component for text input.
import { TextInput } from "@tremor/react";
Usage example
The example below shows text input examples with an icon
property,
error message
and a disabled
state.
Wrong username
import { TextInput } from "@tremor/react"; import { SearchIcon } from "@heroicons/react/solid"; export default () => ( <> <TextInput icon={SearchIcon} placeholder="Search..." /> <TextInput error={true} errorMessage="Wrong username" /> <TextInput placeholder="Disabled" disabled={true} /> </> );
Theming
Text Input
Element | Theme Token |
---|---|
Roundness borderRadiustremor-default | |
Shadow boxShadowtremor-input | |
Font size fontSizetremor-default | |
Border color colorstremor-border-DEFAULT | |
Border color focus colorstremor-brand-subtle | |
Ring color focus colorstremor-brand-muted | |
Icon colorstremor-content-subtle | |
Background color colorstremor-background-DEFAULT | |
Background color disabled colorstremor-background-subtle | |
Background color hover colorstremor-background-muted | |
Text color placeholder colorstremor-content-DEFAULT | |
Text color input colorstremor-content-emphasis | |
Text color disabled colorstremor-content-muted |
API Reference: TextInput
client component
- typeoptional
- Description
- The type of the input field.
- Type
- text | password | email | url
- Default
- text
- Values
- defaultValueoptional
- Description
- The default of TextInput when it is initially rendered. Use when you do not need to control its state.
- Type
- string
- Default
- Values
- E.g. '1'
- valueoptional
- Description
- The controlled state of TextInput. Must be used in conjunction with onChange.
- Type
- string
- Default
- Values
- E.g. '1'
- placeholderoptional
- Description
- Sets the placehoder text
- Type
- string
- Default
- Type...
- Values
- -
- iconoptional
- Description
- Set an icon.
- Type
- React.Element
- Default
- -
- Values
- erroroptional
- Description
- If true, the text input is labeled as invalid.
- Type
- boolean
- Default
- false
- Values
- true, false
- errorMessageoptional
- Description
- The text shown within a tooltip above the error icon if error property is set to true.
- Type
- string
- Default
- Values
- disabledoptional
- Description
- If true, the text input will be disabled.
- Type
- boolean
- Default
- false
- Values
- true, false
Need help? You can also ask the community on GitHub Discussions or Slack.