Skip to main content
The Text Entry component provides accessible input fields with extensive customization options including prefix/suffix text, icons, and clear functionality.

​
Basic usage

import { FlxInput, FlxInputField, FlxInputContainer } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

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

  return (
    <FlxInputContainer>
      <FlxInput placeholder="Enter text...">
        <FlxInputField 
          value={value}
          onChange={(e) => setValue(e.target.value)}
          placeholder="Enter text..."
        />
      </FlxInput>
    </FlxInputContainer>
  );
}

​
With prefix and suffix

Add text or icons before or after the input: 
import { FlxInput, FlxInputField, FlxInputContainer } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function PrefixSuffixInput() {
  const [amount, setAmount] = useState('');
  const [url, setUrl] = useState('');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {/* Price input with prefix */}
      <FlxInputContainer>
        <FlxInput prefix="$" placeholder="0.00">
          <FlxInputField 
            value={amount}
            onChange={(e) => setAmount(e.target.value)}
            type="number"
          />
        </FlxInput>
      </FlxInputContainer>

      {/* URL input with prefix */}
      <FlxInputContainer>
        <FlxInput prefix="https://" placeholder="example.com">
          <FlxInputField 
            value={url}
            onChange={(e) => setUrl(e.target.value)}
          />
        </FlxInput>
      </FlxInputContainer>

      {/* Weight input with suffix */}
      <FlxInputContainer>
        <FlxInput suffix="kg" placeholder="Enter weight">
          <FlxInputField type="number" />
        </FlxInput>
      </FlxInputContainer>
    </div>
  );
}

​
With icons

Add icons to enhance visual context: 
import { FlxInput, FlxInputField, FlxInputContainer, FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function IconInput() {
  const [search, setSearch] = useState('');
  const [email, setEmail] = useState('');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {/* Search input with prefix icon */}
      <FlxInputContainer>
        <FlxInput 
          prefixIcon={FlxIcon}
          placeholder="Search..."
        >
          <FlxInputField 
            value={search}
            onChange={(e) => setSearch(e.target.value)}
          />
        </FlxInput>
      </FlxInputContainer>

      {/* Email input with suffix icon */}
      <FlxInputContainer>
        <FlxInput 
          suffixIcon={FlxIcon}
          placeholder="email@example.com"
        >
          <FlxInputField 
            value={email}
            onChange={(e) => setEmail(e.target.value)}
            type="email"
          />
        </FlxInput>
      </FlxInputContainer>
    </div>
  );
}

​
With clear button

Add a button to clear the input value: 
import { FlxInput, FlxInputField, FlxInputContainer, FlxIcon } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

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

  return (
    <FlxInputContainer>
      <FlxInput 
        hasClear
        clearFn={() => setValue('')}
        clearIcon={<FlxIcon name="close" />}
        clearIconAriaLabel="Clear input"
        placeholder="Type to see clear button"
      >
        <FlxInputField 
          value={value}
          onChange={(e) => setValue(e.target.value)}
        />
      </FlxInput>
    </FlxInputContainer>
  );
}
The clear button automatically appears when the input has a value and hasClear is true.

​
Error state

Display validation errors: 
import { FlxInput, FlxInputField, FlxInputContainer, FlxMessage } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

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

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

  return (
    <FlxInputContainer>
      <FlxInput 
        error={!!error}
        placeholder="email@example.com"
      >
        <FlxInputField 
          value={email}
          onChange={(e) => {
            setEmail(e.target.value);
            validateEmail(e.target.value);
          }}
          type="email"
        />
      </FlxInput>
      {error && (
        <FlxMessage type="error" display="text" style={{ marginTop: '4px' }}>
          {error}
        </FlxMessage>
      )}
    </FlxInputContainer>
  );
}

​
Disabled and filled states

import { FlxInput, FlxInputField, FlxInputContainer } from '@flowx/react-ui-toolkit';

function InputStates() {
  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '16px' }}>
      {/* Disabled input */}
      <FlxInputContainer>
        <FlxInput disabled placeholder="Disabled input">
          <FlxInputField disabled value="Cannot edit" />
        </FlxInput>
      </FlxInputContainer>

      {/* Filled input */}
      <FlxInputContainer>
        <FlxInput filled placeholder="Filled background">
          <FlxInputField />
        </FlxInput>
      </FlxInputContainer>
    </div>
  );
}

​
Form integration

Use inputs in forms with labels and validation: 
import { FlxInput, FlxInputField, FlxInputContainer, FlxButton } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

function LoginForm() {
  const [formData, setFormData] = useState({
    username: '',
    password: ''
  });

  const handleSubmit = (e) => {
    e.preventDefault();
    console.log('Form submitted:', formData);
  };

  const handleChange = (field) => (e) => {
    setFormData(prev => ({
      ...prev,
      [field]: e.target.value
    }));
  };

  return (
    <form onSubmit={handleSubmit} style={{ display: 'flex', flexDirection: 'column', gap: '16px', maxWidth: '400px' }}>
      <div>
        <label htmlFor="username">Username</label>
        <FlxInputContainer>
          <FlxInput 
            hasClear
            clearFn={() => setFormData(prev => ({ ...prev, username: '' }))}
          >
            <FlxInputField 
              id="username"
              value={formData.username}
              onChange={handleChange('username')}
              placeholder="Enter username"
              required
            />
          </FlxInput>
        </FlxInputContainer>
      </div>

      <div>
        <label htmlFor="password">Password</label>
        <FlxInputContainer>
          <FlxInput>
            <FlxInputField 
              id="password"
              type="password"
              value={formData.password}
              onChange={handleChange('password')}
              placeholder="Enter password"
              required
            />
          </FlxInput>
        </FlxInputContainer>
      </div>

      <FlxButton type="submit" variant="fill">
        Sign In
      </FlxButton>
    </form>
  );
}

​
Controlled vs uncontrolled

import { FlxInput, FlxInputField } from '@flowx/react-ui-toolkit';
import { useState } from 'react';

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

  return (
    <FlxInput>
      <FlxInputField 
        value={value}
        onChange={(e) => setValue(e.target.value)}
      />
    </FlxInput>
  );
}
Recommended for most cases. Gives you full control over the input value.

​
Props

​
FlxInput

​
prefixIcon
ElementType<FlxIconProps>
Icon component to display before the input.
​
prefix
string
Text to display before the input.
​
suffixIcon
ElementType<FlxIconProps>
Icon component to display after the input.
​
suffix
string
Text to display after the input.
​
placeholder
string
Placeholder text for the input.
​
error
boolean
default:"false"
Applies error styling to the input.
​
clearIcon
ReactElement<FlxIconProps>
Custom icon for the clear button.
​
clearFn
() => void
Function called when the clear button is clicked.
​
hasClear
boolean
default:"false"
Shows a clear button when the input has a value.
​
disabled
boolean
default:"false"
Disables the input.
​
filled
boolean
default:"false"
Applies a filled background style.
​
clearIconAriaLabel
string
Accessible label for the clear button.

​
FlxInputField

​
placeholder
string
Placeholder text for the input field.
​
value
string
Controlled value of the input.
​
onChange
(e: ChangeEvent<HTMLInputElement>) => void
Callback fired when the input value changes.
​
type
string
default:"text"
HTML input type (text, email, password, number, etc.).
​
disabled
boolean
Disables the input field.

​
FlxInputContainer

​
dataUniqueid
string
Custom data attribute for unique identification.
​
className
string
Additional CSS classes for the container.

​
TypeScript

import type { 
  FlxInputProps, 
  FlxInputFieldProps, 
  FlxInputContainerProps 
} from '@flowx/react-ui-toolkit';

const inputConfig: FlxInputProps = {
  prefix: '$',
  hasClear: true,
  clearFn: () => console.log('Cleared'),
  error: false
};

​
Accessibility

  • Full keyboard navigation support
  • Proper label association with id and htmlFor
  • ARIA attributes for error states
  • Clear button includes accessible label
  • Focus indicators
Always provide a visible label for inputs. While placeholder text can provide hints, it disappears when users start typing and is not a substitute for labels.
Avoid using placeholder text for critical information. Placeholders should provide examples or hints, not essential instructions.

​
Best practices

  • Use appropriate input types (email, tel, url, etc.) for better mobile keyboard support
  • Provide clear error messages that explain how to fix the issue
  • Consider using the clear button for search inputs and filters
  • Group related inputs using fieldsets
  • Validate on blur rather than on every keystroke for better UX

Build docs developers (and LLMs) love

Get started for freeTalk to us