Text Input

A basic widget for getting the user input is a text field. Keyboard and mouse can be used for providing or changing data.

Interactive demo

<div class="container">
      <div class="form-panel-boxed">
        <div class="form-panel-body">
          <div class="row">
            <div class="col-md-6">
              <div class="form-group">
                <label class="col-form-label">Default</label>
                <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Default medium</label>
                <input class="form-control form-control-md" type="text" spellcheck="false" data-ms-editor="true">
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Default small</label>
                <input class="form-control form-control-sm" type="text" spellcheck="false" data-ms-editor="true">
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Default extra small</label>
                <input class="form-control form-control-xsm" type="text" spellcheck="false" data-ms-editor="true">
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group disabled">
                <label class="col-form-label">Disabled</label>
                <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group  required">
                <label class="col-form-label"> Input with success message</label>
                <div class="field-icon field-success">
                  <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                </div>
                <span class="message text-success"><i class="fas fa-check-circle me-1"></i>This is a success message.</span> <small class="form-text text-muted">This is example helper text!</small> </div>
				
				<div class="form-group required">
                  <label class="col-form-label">Input with warning message</label>
                  <div class="field-icon field-warning">
                    <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                  </div>
                  <span class="message text-warning"><i class="fa-solid fa-triangle-exclamation me-1"></i>This is a warning message.</span> <small class="form-text text-muted">Example help text which will remains unchanged</small> </div>
              <div class="form-group required  field-has-error">
                <label class="col-form-label">Input with error message</label>
                <input class="form-control" type="text" spellcheck="false" data-ms-editor="true">
                <span class="message text-danger"><i class="fas fa-exclamation-circle me-1"></i>This is an error message. </span> <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Inline button</label>
                <div class="input-group">
                  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn btn-primary" type="button">Find</button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Inline button medium</label>
                <div class="input-group">
                  <input type="text" class="form-control form-control-md" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn btn-primary" type="button">Find</button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Inline button small</label>
                <div class="input-group">
                  <input type="text" class="form-control form-control-sm" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn btn-primary" type="button">Find</button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">Inline button extra small</label>
                <div class="input-group">
                  <input type="text" class="form-control form-control-xsm" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn btn-primary" type="button">Find</button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">With icon</label>
                <div class="input-group input-group-with-icon">
                  <input type="text" class="form-control" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn" type="button"><i class="fal fa-search"></i></button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">With icon medium</label>
                <div class="input-group input-group-with-icon">
                  <input type="text" class="form-control form-control-md" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn" type="button"><i class="fal fa-search"></i></button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">With icon small</label>
                <div class="input-group input-group-with-icon">
                  <input type="text" class="form-control form-control-sm" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn" type="button"><i class="fal fa-search"></i></button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
              <div class="form-group">
                <label class="col-form-label">With icon extra small</label>
                <div class="input-group input-group-with-icon">
                  <input type="text" class="form-control form-control-xsm" placeholder="" aria-label="" aria-describedby="" spellcheck="false" data-ms-editor="true">
                  <button class="btn" type="button"><i class="fal fa-search"></i></button>
                </div>
                <small class="form-text text-muted">This is example helper text!</small> </div>
            </div>
          </div>
        </div>
      </div>
    </div>

Usability Guidelines

• Use the appropriate field length for the input

• Length provides the users with an idea of how much text to input E.g. a postal code text input should only be 6 numbers long

• Avoid using label as placeholder text inside of the text field. This ensures that the hint text is available, and users can review their answers if need be. Clear labelling would also help users to understand better what to input.

• If hint text is used, give examples to show users how you’ll like them to enter their answers or how you will be using their information E.g. for emails, a useful hint text would be "We will only use your email for receipts." or specify the date format

When to use

Use the text input component when you need to let users enter text that’s no longer than a single line, such as their name or phone number

When not to use

Do not use the text input component if you need to let users enter longer answers that might span multiple lines. In this case, you should use the text area component.