@ithaka/bonsai

--- title: Text Inputs description: Text input fields enable users to supply data as part of a form or a query string for search. sass: ./scss/_textinputs.scss --- ## How to Use ### Simple Text Input The most basic text input. ``` html_example <label for="inp_1"> Text Input w/Placeholder (put focus on me!) <input type="text" id="inp_1" name="default_with_placeholder" placeholder="placeholder text"/> </label> ``` <br /> ### Simple Password Input Use the text input with `type="password"` to mask the characters being typed by the user. ``` html_example <label for="pwd_1"> Password Input w/Placeholder <input type="password" id="pwd_1" name="default_type_password" placeholder="password"/> </label> ``` <br /> ### Input Validation Only show validation messages or styles after a user has interacted with a particular field and the input element loses focus. #### Success Apply the `.input-success` class to the `<label>` element to show the input has been validated. ``` html_example <label for="inp_1" class="input-success"> Text Input Success <input type="text" id="inp_1" name="default_with_placeholder" placeholder="placeholder text"/> </label> ``` #### Error Apply the `.input-error` class to the `<label>` element to show the input has not passed validation. ``` html_example <label for="inp_1" class="input-error"> Text Input Error <input type="text" id="inp_1" name="default_with_placeholder" value="bonsaimaster@@" aria-describedby="inp_1_error_msg"/> <div id="inp_1_error_msg">Email format is incorrect.</div> </label> ``` <div class="callout information"> <span>Note: `aria-describedby` should be added for inputs with errors via javascript.</span> </div> <br /> ### Input Disabled Apply the attribute `value="disabled"` to the `<input>` element to prevent user interaction. ``` html_example <label for="inp_1"> Text Input Disabled <input type="text" id="inp_1" name="input_disabled" value="disabled" disabled/> </label> ``` <br /> ### Input Autocomplete Apply the `.input-search-autocomplete` class to the `<label>` element to style the input with a search icon. ``` html_example <label for="inp_1" class="input-search-autocomplete"> Autocomplete Search <input type="text" id="inp_1" name="search-autocomplete" placeholder="Search a title"/> </label> ``` <br /> ### Input With Primary Search Button Use an input with buttons to create an inline action. ``` html_example <label for="search-primary">Search - Primary Button (hover and set as :active)</label> <div class="input-group"> <input class="input-group-field" id="search-primary" type="text" placeholder="Search"/> <div class="input-group-button"> <button type="submit" class="button"> <i class="icon-search"></i> </button> </div> </div> ``` <br /> ### Input With Secondary Search Button The inline button can take multiple styles. In this case, we apply the `.secondary` class the `<button>` to change both the button and input styling. ``` html_example <label for="search">Search</label> <div class="input-group"> <input class="input-group-field" id="search" type="text" placeholder="Search"/> <div class="input-group-button"> <button type="submit" class="button secondary"> <i class="icon-search"></i> </button> </div> </div> ``` <br /> ### <a name="input-select"></a>Input with Select and Submit One can also create an input with a button and an inline select box to give the inline action multiple parameters. ``` html_example <label for="search-with-select">Search with Select</label> <div class="input-group input-search-select"> <input class="input-group-field" id="search-with-select" type="text" placeholder="Search"/> <div class="input-group-field select"> <label for="search-select-set" class="show-for-sr">Select Search Set</label> <select id="search-select-set"> <option selected>Option 1</option> <option>Option 2</option> <option>Option 3</option> </select> </div> <div class="input-group-button"> <button type="submit" class="button secondary"> <i class="icon-search"></i> </button> </div> </div> ``` <br /> ## Accessibility 1. See [forms overview](forms-overview.html#forms-accessibility) to verify accessibility requirements for all form elements have been met. 1. Avoid breaking numbers with distinct sections (such as phone numbers, Social Security Numbers, or credit card numbers) into separate input fields. For example, use one input for phone number, not three (one for area code, one for local code, and one for number). Each field needs to be labeled for a screen reader and the labels for fields broken into segments are often not meaningful. 1. Any additional information — such as required, optional, or example text — should be wrapped within the label tags. ## Guidelines 1. The length of the text input provides a hint to users as to how much text to write. 1. Text inputs are among the easiest type of input for desktop users but are more difficult for mobile users. 1. Do not use when users are choosing from a specific set of options.