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	borderRadiustremor-default
Shadow boxShadowtremor-input	boxShadowtremor-input
Font size fontSizetremor-default	fontSizetremor-default
Border color colorstremor-border-DEFAULT	colorstremor-border-DEFAULT
Border color focus colorstremor-brand-subtle	colorstremor-brand-subtle
Ring color focus colorstremor-brand-muted	colorstremor-brand-muted
Icon colorstremor-content-subtle	colorstremor-content-subtle
Background color colorstremor-background-DEFAULT	colorstremor-background-DEFAULT
Background color disabled colorstremor-background-subtle	colorstremor-background-subtle
Background color hover colorstremor-background-muted	colorstremor-background-muted
Text color placeholder colorstremor-content-DEFAULT	colorstremor-content-DEFAULT
Text color input colorstremor-content-emphasis	colorstremor-content-emphasis
Text color disabled colorstremor-content-muted	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.

Tabs Text