Text Input

Text Input Component

The Text Input component provides a styled input field that maintains consistent appearance and behavior across the application.

Example

Preview Code

Copy

<div style="max-width:300px"><input placeholder="Enter your name" class="input-field skin-form !text-body placeholder:soft interactive "/></div>

<div style="max-width:300px"><input placeholder="Enter your name" class="input-field skin-form !text-body placeholder:soft interactive "/></div>

Preview Code

Copy

<div style="max-width:300px;margin-top:12px"><input type="email" placeholder="Enter your email" aria-invalid="true" class="input-field skin-form !text-body placeholder:soft interactive "/></div>

<div style="max-width:300px;margin-top:12px"><input type="email" placeholder="Enter your email" aria-invalid="true" class="input-field skin-form !text-body placeholder:soft interactive "/></div>

Preview Code

Copy

<div style="max-width:300px;margin-top:12px"><input type="password" placeholder="Enter your password" disabled="" class="input-field skin-form !text-body placeholder:soft interactive "/></div>

<div style="max-width:300px;margin-top:12px"><input type="password" placeholder="Enter your password" disabled="" class="input-field skin-form !text-body placeholder:soft interactive "/></div>

Usage

import TextInput from "@altitude/ui/react/ui/text-input";

export default function InputExample() {
  const [value, setValue] = React.useState("");

  const handleChange = (e) => {
    setValue(e.target.value);
  };

  return (
    <div>
      {/* Basic text input */}
      <TextInput placeholder="Enter your name" />

      {/* Input with type and validation */}
      <TextInput type="email" placeholder="Enter your email" required />

      {/* Controlled input */}
      <TextInput
        value={value}
        onChange={handleChange}
        placeholder="Type something..."
      />
    </div>
  );
}

Props

The Text Input component accepts all standard HTML input attributes:

Prop	Type	Required	Description
type	string	No	Input type (e.g., “text”, “email”, “password”) (default: “text”)
placeholder	string	No	Placeholder text
value	string	No	Controlled input value
defaultValue	string	No	Default value for uncontrolled input
disabled	boolean	No	Whether the input is disabled
required	boolean	No	Whether the input is required
aria-invalid	boolean	No	Whether the input has an error
className	string	No	Additional CSS classes
onChange	function	No	Handler for input changes

All other standard HTML input attributes are also supported.

Notes

This is a base UI component that provides styling but no built-in validation or labeling. For a complete form field with label, helper text, and validation, consider using the Text Input Field component.