Skip to main content

​
Overview

TextField is a form input component that allows users to enter single-line text. It supports various input types, validation states, adornments (prefix/suffix elements), and multiple size variants.

​
Basic Usage

import { TextField } from 'grauity';
import { useState } from 'react';

function MyForm() {
  const [value, setValue] = useState('');

  return (
    <TextField
      name="username"
      label="Username"
      placeholder="Enter your username"
      value={value}
      onChange={(e) => setValue(e.target.value)}
    />
  );
}

​
With Validation

import { TextField } from 'grauity';
import { useState } from 'react';

function ValidatedInput() {
  const [email, setEmail] = useState('');
  const [error, setError] = useState('');

  const handleBlur = () => {
    if (!email.includes('@')) {
      setError('Please enter a valid email address');
    } else {
      setError('');
    }
  };

  return (
    <TextField
      name="email"
      label="Email"
      type="email"
      placeholder="[email protected]"
      value={email}
      onChange={(e) => setEmail(e.target.value)}
      onBlur={handleBlur}
      errorMessage={error}
      helpMessage="We'll never share your email"
      isRequired
    />
  );
}

​
With Adornments

import { TextField, Icon } from 'grauity';

<TextField
  name="phone"
  label="Phone Number"
  placeholder="1234567890"
  adornments={{
    start: (
      <>
        <NSIcon name="call-end" color="currentColor" />
        +91
      </>
    )
  }}
/>

​
Sizes

TextField comes in four sizes: small, medium (default), large, and extra-large. 
<NSTextField name="small" size="small" placeholder="Small (32px)" />
<NSTextField name="medium" size="medium" placeholder="Medium (40px)" />
<NSTextField name="large" size="large" placeholder="Large (48px)" />
<NSTextField name="xlarge" size="extra-large" placeholder="Extra Large (56px)" />

​
Input Types

// Text input
<NSTextField name="text" type="text" placeholder="Text input" />

// Number input
<NSTextField name="number" type="number" placeholder="Enter a number" min={0} max={100} step={1} />

// Email input
<NSTextField name="email" type="email" placeholder="[email protected]" />

// Password input
<NSTextField name="password" type="password" placeholder="Enter password" />

// URL input
<NSTextField name="url" type="url" placeholder="https://example.com" />

​
Props

​
name
string
required
The name of the input field. Used for form submission and identification.
​
label
string
The label displayed above the input field.
​
placeholder
string
Placeholder text displayed when the field is empty.
​
value
string
default:"''"
The current value of the input field.
​
type
string
default:"'text'"
The HTML input type. Accepts any valid HTML input type (text, email, password, number, url, tel, etc.).
​
inputMode
string
default:"'text'"
Hint for mobile keyboards. Options: 'none' | 'text' | 'search' | 'email' | 'tel' | 'url' | 'numeric' | 'decimal'
​
size
string
default:"'medium'"
The size of the input field. Options: 'small' | 'medium' | 'large' | 'extra-large'
​
color
string
default:"'brand'"
The color theme for the field. Options: 'brand' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info'
​
isRequired
boolean
default:false
Whether the field is required. Displays a required indicator next to the label.
​
isDisabled
boolean
default:false
Whether the input field is disabled.
​
isReadOnly
boolean
default:false
Whether the input field is read-only.
​
errorMessage
string
Error message to display when the field is invalid.
​
helpMessage
string
Helper text displayed below the input field.
​
maxLength
number
Maximum number of characters allowed. Shows character count when combined with helpMessage.
​
min
number
Minimum value for number inputs.
​
max
number
Maximum value for number inputs.
​
step
number
Step value for number inputs.
​
pattern
string
Regular expression pattern for validation.
​
autoComplete
string
default:"'on'"
HTML autocomplete attribute.
​
autoFocus
boolean
default:false
Whether the field should autofocus on mount.
​
adornments
object
Adornments to display inside the input field.Properties:
  • start: React node displayed at the start (left) of the input
  • end: React node displayed at the end (right) of the input
​
onChange
function
Callback fired when the input value changes.
(event: React.ChangeEvent<HTMLInputElement>) => void
​
onBlur
function
Callback fired when the input loses focus.
(event: React.FocusEvent<HTMLInputElement>) => void
​
onFocus
function
Callback fired when the input receives focus.
(event: React.FocusEvent<HTMLInputElement>) => void
​
onClick
function
Callback fired when the input is clicked.
(event: React.MouseEvent<HTMLInputElement>) => void
​
onKeyDown
function
Callback fired when a key is pressed.
(event: React.KeyboardEvent<HTMLInputElement>) => void
​
className
string
Additional CSS class name for the container.

​
TypeScript

import { TextFieldProps } from 'grauity';

type TextFieldSize = 'small' | 'medium' | 'large' | 'extra-large';
type TextFieldColors = 'brand' | 'primary' | 'secondary' | 'success' | 'danger' | 'warning' | 'info';

interface InputAdornments {
  start?: React.ReactNode;
  end?: React.ReactNode;
}

​
Accessibility

  • The component uses semantic HTML with proper <label> and <input> elements
  • Required fields are indicated with aria-required
  • Error messages are announced to screen readers
  • All interactive elements are keyboard accessible
When using adornments with interactive elements (buttons, icons), ensure they are keyboard accessible and have appropriate ARIA labels.

​
Source

View the source code on GitHub:

Build docs developers (and LLMs) love

Get started for freeTalk to us