Overview

Text input is a single-line input field that allows users to enter a short amount of text, such as a name, email address, or password.

Text boxes typically have a limited character count and may include additional features such as auto-complete and input validation. Text inputs should always be accompanied by labels.

Text input

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Label Hint text

Figma Bootstrap

<div class="row">
       
    <div class="col-xs-6 col-lg-4">

        <!-- Default style text field -->     
        <!-- Label for the input element -->
        <label class="qld__label" for="text-field-example">Label</label>
        
        <!-- Hint text associated via 'aria-describedby' -->
        <span class="qld__hint-text" id="text-field-example-hint">Hint text</span>
        
        <!-- Input field -->
        <input type="text" class="qld__text-input qld__text-input--block" id="text-field-example" name="input1" aria-describedby="text-field-example-hint">
    
    </div> 

    <div class="col-xs-6 col-lg-4 qld__form-style-filled">

        <!-- Filled style text field -->     
        <!-- Label for the input element -->
        <label class="qld__label" for="text-field-filled-example">Label</label>
        
        <!-- Hint text associated via 'aria-describedby' -->
        <span class="qld__hint-text" id="text-field-filled-example-hint">Hint text</span>
        
        <!-- Input field -->
        <input type="text" class="qld__text-input qld__text-input--block" id="text-field-filled-example" name="input2" aria-describedby="text-field-filled-example-hint">
    
    </div>

</div>

Valid and invalid states

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Text input label Error message

Text input label Hint text Success message

Figma Bootstrap

<div class="row qld__row-gap-component">
 
 <div class="co-xs-12 col-lg-4">

     <!-- Example: Invalid field -->
     <!-- Label for the input element -->
     <label for="text-field-invalid-example" class="qld__label">Text input label</label>

     <!-- Error message associated via 'aria-describedby' -->
     <span id="example-1-error-message" class="qld__input--error"><svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
         <use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
       </svg>Error message</span>

     <!-- Text field -->  
     <input type="text" id="text-field-invalid-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--error" aria-describedby="example-1-error-message">

 </div>
 
 
 
 <div class="qld__form-style-filled co-xs-12 col-lg-4">

   <!-- Example: Invalid field filled style -->
   <!-- Label for the input element -->
   <label for="text-field-invalid-filled-example" class="qld__label">Text input label</label>

   <!-- Error message associated via 'aria-describedby' -->
   <span id="example-2-error-message" class="qld__input--error"><svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Error: ">
        <use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-error">
      </svg>Error message</span>

   <!-- Text field --> 
   <input type="text" id="text-field-invalid-filled-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--error" aria-describedby="example-2-error-message">

 </div>
 
</div>


<div class="row qld__row-gap-component qld__margin-t-component">

 <div class="co-xs-12 col-lg-4" >

   <!-- Example: Success field -->
   <!-- Label for the input element -->
   <label for="text-field-valid-example" class="qld__label">Text input label</label>

   <!-- Hint text associated via 'aria-describedby' -->
   <span class="qld__hint-text" id="text-field-valid-example-hint">Hint text</span>

   <!-- Error message associated via 'aria-describedby' -->
   <span id="example-1-success-message" class="qld__input--success"><svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
        <use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
   </svg>Success message</span>

   <!-- Text field --> 
   <input type="text" id="text-field-valid-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--valid" aria-describedby="text-field-valid-example-hint example-1-success-message">

 </div>
 
 <div class="qld__form-style-filled co-xs-12 col-lg-4">

   <!-- Example: Success field filled style -->
   <!-- Label for the input element -->
   <label for="text-field-valid-filled-example" class="qld__label">Text input label</label>

   <!-- Hint text associated via 'aria-describedby' -->
   <span class="qld__hint-text" id="text-field-valid-filled-example-hint">Hint text</span>

   <!-- Error message associated via 'aria-describedby' -->
   <span id="example-2-success-message" class="qld__input--success"><svg class="qld__icon qld__icon--lead qld__icon--sm" role="img" aria-label="Success: ">
       <use href="./?a=169317:dist/mysource_files/img/QLD-icons.svg#status-success">
      </svg>Success message</span>

   <!-- Text field -->    
   <input type="text" id="text-field-valid-filled-example" placeholder="placeholder text" class="qld__text-input qld__text-input--block qld__text-input--valid" aria-describedby="text-field-valid-filled-example-hint example-2-success-message">

 </div>

</div>

Disabled

Vanilla example

Palette

Default
Light
Alt
Dark
Dark-alt

Text input label Hint text

Figma Bootstrap

<div class="row">
    
    <div class="col-xs-6 col-lg-4 ">

        <!-- Disabled default style text field -->
        <!-- Label for the input element -->
        <label class="qld__label" for="disabled-text-field-example">Text input label</label>
        
        <!-- Hint text associated via 'aria-describedby' -->
        <span class="qld__hint-text" id="disabled-text-field-example-hint">Hint text</span>
        
        <!-- Input field -->
        <input type="text" class="qld__text-input qld__text-input--block" id="disabled-text-field-example" name="input1" aria-describedby="disabled-text-field-example-hint" disabled>
    
    </div> 

    <div class="col-xs-6  col-lg-4 qld__form-style-filled">
    
        <!-- Disabled filled style text field -->    
        <!-- Label for the input element -->
        <label class="qld__label" for="disabled-filled-text-field-example">Text input label</label>
        
        <!-- Hint text associated via 'aria-describedby' -->
        <span class="qld__hint-text" id="disabled-filled-text-field-example-hint">Hint text</span>
        
        <!-- Input field -->
        <input type="text" class="qld__text-input qld__text-input--block" id="disabled-filled-text-field-example" name="input2" aria-describedby="disabled-filled-text-field-example-hint" disabled>
    
    </div>

</div>

Usage guidelines for text inputs

Below are general guidelines for text inputs, please see our form component for a more complete guide on how to structure and layout your forms. It's also recommended that you review the Australian Government style manual for more detailed advice on form content.

When to use

When collecting short and specific information: Text inputs are best suited for collecting short and specific information such as names, email addresses, and phone numbers.
When only one answer is required: Text inputs are ideal when only one answer is required from the user.
When input validation is necessary: Text inputs allow for input validation, which means that the user's input can be checked for errors before being submitted.

When not to use

When long-form input is required: Text inputs aren't ideal for collecting long-form input such as paragraphs use a text area instead.
When multiple answers are required: Text inputs aren't the best option when multiple answers are required from the user.
When the input needs to be limited: Text inputs shouldn't be used when the input needs to be limited to a specific range or set of values, such as selecting a date from a calendar. Consider using check boxes, radio boxes or select fields.

Last updated: April 2026

Back to top