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.

<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'
  }}
/>

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.