Text Input

A text field is an input field that users can type into. It has a range of options and supports several text formats.

Usage

Code Editor
Copy
import { TextInput } from '@erudilabs/alma'

Component

Here preview and detail explain of Textarea component


Default

Code Editor
Copy
<TextInput
  label="Full name"
  name="full_name"
  placeholder="Enter your full name"
/>

Disabled

Code Editor
Copy
<TextInput
  label="Full name"
  name="full_name_disabled"
  placeholder="Enter your full name"
  disabled
/>

Helper

This field is using a helper text

Code Editor
Copy
<TextInput
  label="Full name"
  name="full_name_helper"
  placeholder="Enter your full name"
  helper="This field is using a helper text"
/>

Error

An unexpected error occurred. Please try again later

Code Editor
Copy
<TextInput
  label="Full name"
  name="full_name_error"
  placeholder="Enter your full name"
  errorMessage="An unexpected error occurred. Please try again later"
/>

Prefix

Code Editor
Copy
<TextInput
  name="prefix_input"
  label="With prefix"
  placeholder="Example text input with prefix icon"
  prefix={<DocumentText className="text-gray-600 dark:test-gray-500" />}
/>

Suffix

Code Editor
Copy
<TextInput
  name="suffix_input"
  label="With suffix"
  placeholder="Example text input with suffix icon"
  suffix={<Briefcase className="text-gray-600 dark:test-gray-500" />}
/>

Max Length

Code Editor
Copy
<TextInput
  name="max_length_input"
  label="Max Length"
  placeholder="Example text input with max length"
  maxLength={2}
/>

Props Reference

Prop
Type

testId?

string

className?

string

label?

string

name

string

helper?

ReactNode

prefix?

ReactNode

maxLength?

number

suffix?

ReactNode

placeholder?

string

errorMessage?

string

defaultValue?

string

disabled?

boolean

onChange?

(e: ChangeEvent) => void

onBlur?

(e: FocusEvent) => void