components

Input Text

Text input allows users to enter and edit single-line text values. Use text inputs for collecting short text data like names, emails, and search queries.

Import

import { InputText } from "@skedulo/breeze-ui-react";

Usage Guidance

When to use

+Collect single-line text input like names, emails, or search queries.
+Any form field that requires free-text entry.
+When combined with label and error props for full form field behavior.

When not to use

−For multi-line text — use InputTextarea.
−For numeric values — use InputNumber.
−For selecting from predefined options — use InputSelect or ComboBox.

Examples

Code Samples

Default with Placeholder

A basic text input with a label and placeholder text.

import { InputText } from "@skedulo/breeze-ui-react";

export default function DefaultInput() {
  return (
    <InputText
      name="full-name"
      label="Full Name"
      placeholder="Enter your full name"
    />
  );
}

With Value

A text input pre-filled with a value.

import { InputText } from "@skedulo/breeze-ui-react";

export default function InputWithValue() {
  return (
    <InputText
      name="email"
      label="Email Address"
      value="user@example.com"
    />
  );
}

Disabled

A disabled text input that cannot be edited.

import { InputText } from "@skedulo/breeze-ui-react";

export default function DisabledInput() {
  return (
    <InputText
      name="disabled-field"
      label="Disabled Field"
      value="Cannot edit this"
      disabled
    />
  );
}

Invalid with Error

A text input showing a validation error. Both invalid and error props are used together.

import { InputText } from "@skedulo/breeze-ui-react";

export default function ErrorInput() {
  return (
    <InputText
      name="username"
      label="Username"
      value="ab"
      invalid
      error="Username must be at least 3 characters"
    />
  );
}

Required

A text input marked as required, showing a required indicator on the label.

import { InputText } from "@skedulo/breeze-ui-react";

export default function RequiredInput() {
  return (
    <InputText
      name="required-field"
      label="Required Field"
      placeholder="This field is required"
      required
    />
  );
}

Optional

A text input marked as optional, showing an optional indicator on the label.

import { InputText } from "@skedulo/breeze-ui-react";

export default function OptionalInput() {
  return (
    <InputText
      name="optional-field"
      label="Optional Field"
      placeholder="This field is optional"
      optional
    />
  );
}

Guidelines

Do

✓Always provide a label for accessibility.
✓Use placeholder text as a hint, not as a replacement for the label.
✓Use the error prop with invalid=true for validation feedback.
✓Set appropriate type attribute (email, tel, url) for mobile keyboard optimization.

Don't

✗Don't use placeholder as the only label — it disappears when typing.
✗Don't use InputText for passwords without proper type attribute.
✗Don't leave required fields without validation feedback.
✗Don't use overly long placeholder text.

API Reference

Prop	Type	Default	Description
name*	string	—	The name attribute for the input element, used for form submission and accessibility.
label	string	—	A visible label displayed above the input field.
placeholder	string	—	Hint text displayed when the input is empty.
value	string	—	The current value of the input.
disabled	boolean	false	Prevents user interaction and applies a disabled visual style.
invalid	boolean	false	Marks the input as invalid, applying an error visual style. Use together with the error prop to display a message.
error	string	—	An error message displayed below the input. Should be used together with the invalid prop.
required	boolean	false	Marks the field as required, displaying a required indicator alongside the label.
optional	boolean	false	Marks the field as optional, displaying an optional indicator alongside the label.
onChange	(value: string) => void	—	Callback fired when the input value changes.

Related Components

Input Textarea Input Number Input Select LabeledInput