Components

Text Input

Fields to enter and submit text input.

Import TextInput

Tremor exports one components 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} />
  </>
);

API Reference: TextInput

client component

typeoptional
Description: The type of the input field.
Type: text | password
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

Tabs Text