Text field

Text fields allow users to input custom text entries with a keyboard. Various options can be shown with the field to communicate the input requirements. Always use a label and associate the label to the field properly.

Code

Stacked layout

Labels can be placed either on top or on the side. Top labels are the default and are recommended because they work better with long copy, localization, and responsive layouts.

Label (Required) Help or instructional text goes here

<div class="form-group form-group--stacked">
  <label for="textinput" class="form-label"> … </label>
  <span class="help-block">
    <span class="help-block__text"> … </span>
    <span class="help-block__link"> … </span>
    <!-- optional warning message -->
    <div class="text-warning d-flex align-items-center space-x space-x-3">
      <svg class="icon icon-16" aria-hidden="true">
        <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
      </svg>
      …
    </div>
    <!-- /optional warning message -->
  </span>
  <!-- error handling -->
  <div class="form-error" role="alert">…</div>
  <!-- /error handling -->
  <input type="text" id="" value="" placeholder="Placeholder" class="form-control" />
</div>

Symbols prefixed by underscore ("_")

When referencing/naming Symbol with a form input, any argument/option/variable that are endemic to the input itself (i.e. "id", "placeholder", "required") are **not** preceded by an _underscore. In other cases, an _underscore precedes to denote it affects the output of a container/parent element, or a sibling.

@textInput(myForm(""),
  Symbol("_label") -> "",
  Symbol("id") -> "",
  Symbol("placeholder") -> "",
  Symbol("type") -> "",
  Symbol("required") -> false,
  Symbol("_markRequired") -> false,
  Symbol("_markOptional") -> false,
  Symbol("autocomplete") -> false,
  Symbol("readOnly") -> false,
  Symbol("enabled") -> true,
  Symbol("disabled") -> false,
  Symbol("_help") -> "",
  Symbol("_helpLink") -> <a href="#">Link</a>,
  Symbol("class") -> "",
  Symbol("_class") -> "",
)

NameTypeDescriptionDefault valueCopy

id
string (required)
adds an id to the input and a for attribute to the associated label label
blank
_label
string
Text that describes the control. Will be both visible and clickable.
blank
placeholder
boolean
Placeholder text to display in the text field whenever it is empty.
false
type
”number” | “text” | “search” | “tel” | “url” | “email” | “password” | Learn more
Determine the type of input.
blank (but default is text)
required
boolean
Require a valid input value from the user.
false
_markRequired
boolean
A visual “required” indicator
false
_markOptional
boolean
A visual “optional” indicator
false
autocomplete
“on” | “off”
Enable automatic completion by the browser when available.
‘on’
readOnly
boolean
Disable editing of the input.
false
enabled
boolean
true
disabled
boolean
Sets the field as to appear disabled, users will not be able to interact with the text field.
false
class
string
adds class="" to the input
blank
_class
string
adds class="" to the container div (.form-check)
blank
_help
string
outputs additional help or instructional text
blank
_helpLink
html block (no quotes)
appends a link to help or instructional text
blank

import Form from 'react-p21/Form';

<Form>
  <Form.Row>
    <Form.Group controlId="">
      <Form.Label>…</Form.Label>
      <Form.Control type="" placeholder="Placeholder" />
    </Form.Group>
  </Form.Row>
</Form>;

Learn more about its React properties

Horizontal layout

Side labels are most useful when vertical space is limited.

HTML
Twirl

<div class="form-group row">
  <div class="col-sm-3 col-md-2 d-md-flex text-md-right flex-column align-items-end">
    <label class="col-form-label" for="text-field">…</label>
    <span class="help-inline">(Required)</span>
  </div>
  <div class="col-sm-9 col-md-10 input-width--md">
    <input class="form-control" id="text-field" required="true" type="text" placeholder="Placeholder" />
    <!-- error handling -->
    <div class="form-error" role="alert">…</div>
    <!-- /error handling -->
    <span class="help-block">
      <span class="help-block__text"> … </span>
      <!-- optional warning message -->
      <div class="text-warning d-flex align-items-center space-x space-x-3">
        <svg class="icon icon-16" aria-hidden="true">
          <use xlink:href="/assets/svg/solid.svg#bell-on"></use>
        </svg>
        …
      </div>
      <!-- /optional warning message -->
    </span>
  </div>
</div>

@standardInputText(myForm(""),
  …
)

(View properties under Stacked layout -> Twirl)