Text Input

The TextInput component is used to allow users to enter single-line text, with options to adjust the width dynamically using halfFluid, fullFluid, or characterWidth. It can be used with prefixes, suffixes, and error states for flexible form input scenarios.

Variants

Default

<label
  for="input-id"
  class="gi-text-md gi-mb-1 gi-block gi-mb-2">
  Label
</label>
<div class="gi-flex gi-items-center ">
  <input
    id="input-id"
    data-testid="textbox"
    type="text"
    autocomplete="on"
    class="gi-border-gray-950 gi-w-1/2 gi-flex-initial gi-border-sm gi-border-solid gi-box-border gi-h-10 gi-mt-0 gi-p-1 gi-z-1 xs:gi-text-md gi-text-sm gi-leading-10 xs:!gi-leading-5 gi-focus-state-outline gi-focus-state-border gi-focus-state-outline gi-focus-state-border"
  />
</div>

{{ govieTextInput({
  "label": {
    "content": "Label",
    "for": "character-width-input"
  },
  "halfFluid": true,
  "characterWidth": 20,
  "id": "character-width-input"
}) }}

import { TextInput } from "@govie-ds/react";

<TextInput
  error={{
    text: ''
  }}
  halfFluid
  hint={{
    text: ''
  }}
  id="text-input-id"
  label={{
    htmlFor: 'text-input-id',
    text: 'Input Label'
  }}
/>

Usage

Best Practices

When to Use This Component

• Single-Line Text Inputs: Use this component for short, single-line inputs such as names, email addresses, phone numbers, and short codes (e.g., postal codes).

• Customizable Widths: Utilise the halfFluid or fullFluid properties for inputs that need to fit in responsive layouts. The characterWidth prop allows you to specify a custom width based on the number of characters the input should accommodate.

• Error States: For forms where invalid input needs to be flagged, the hasError prop visually indicates errors with a red border.

• Custom Prefixes or Suffixes: This component supports adding contextual information next to the input (e.g., units, symbols) using prefix and suffix props.

When Not to Use This Component

• Multi-Line Text Fields: If your input requires multiple lines (such as a message box), use a textarea instead of TextInput.

• Input with Formatting Requirements: If input masking or format validation (like date pickers or rich text editors) is necessary, consider using a specialised component.

• Non-Textual Inputs: This component is not suitable for non-textual input types like checkboxes, radio buttons, or dropdown menus.

Status