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 { RiSearchLine } from '@remixicon/react';import { TextInput } from '@tremor/react';
export function TextInputUsageExample() {  return (    <div className="mx-auto max-w-sm space-y-8">      <div>        <TextInput icon={RiSearchLine} placeholder="Search..." />      </div>      <div>        <TextInput error={true} errorMessage="Wrong username" />      </div>      <div>        <TextInput placeholder="Disabled" disabled={true} />      </div>      <div>        <TextInput placeholder="Type password here" type="password" />      </div>    </div>  );}

API Reference: TextInput

client component

type: The type of the input field.

defaultValue: The default of TextInput when it is initially rendered. Use when you do not need to control its state.

value: The controlled state of TextInput. Must be used in conjunction with onChange.

onValueChange: Event handler called when the state of the input changes.

placeholder: Sets the placehoder text

icon: Set an icon.

error: If true, the text input is labeled as invalid.

errorMessage: Text to be displayed if the error prop is set to `true`.

disabled: If true, the text input will be disabled.

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