UI Components
Form Fields alpha

Related Lesson

Forms
Fabric 107

Single-Line Text Fields

Example ⚡


1. Add this to your initial state

text: ''

2. Paste this where you want the textbox to be

<UITextBox
  label='Username'
  example='taylor.swift'
  value={this.state.text}
  onChange={
    function(data){
      this.setState({text:data.target.value})
    }.bind(this)
  }/>

Usage

  • Use single-line text fields when the expected input is short and could resonably fit on one line.
  • This field should always have an example, and you should always try to use one of the generally accepted examples.
  • Placeholder text should never flow over the size of the input field.
  • The width and height of input fields should be representitive of the width of an average response (e.x. In an address, the City field should always be wider than the ZIP Code field).

Multi-Line Text Fields

Example ⚡


1. Add this to your initial state

text: ''

2. Paste this where you want the textarea to be

<UITextArea
  value=''
  onChange={
    function(data){
      this.setState({text:data.target.value})
    }.bind(this)
  }
  rows={10}
  cols={50}
  placeholder='Description'/>

Usage

Use multi-line text fields when the expected input is long.

Multi-line text fields do not have example text.

Checkbox

Example ⚡


 <UICheckbox
  value='cheese'
  onChange={this.handleCheeseLoving}
  checked={this.state.cheeseLover}
  name='cheese_lover'
  disabled={false} />

Usage

Checkboxes should be used when a user can select multiple options from a list.

Radio Button

Example ⚡


<UIRadio name='conn-type'
  onChange={this.handleChange}
  selected={'tcp'}>
  <UIRadio.Option
    value='tcp'
    onClick={this.tcpSelected}
    labelPosition='right'>
      TCP
  </UIRadio.Option>
  <UIRadio.Option
    value='udp'
    onClick={this.udpSelected}>
      UDP
  </UIRadio.Option>
</UIRadio>

Usage

Radio buttons should be used when a user can select a single option from a list. If the number of options available is greater than 4, use a dropdown instead.

Date Picker

Example


<UIDate />

Usage

Date Pickers should be used if the expected output is a date.

If you want to convey a date range, simply put 2 date pickers in a form with the word "to" in the middle of them.

Switch

Example


<UISwitch />

Usage

Switches should be used when you are allowing a user to enable or disable something, while checkboxes should be used when you are allowing a user to select one or more things from a list.

Changelog

  • December 9, 2016 - Promoted to Alpha and updated to automated docs
  • October 31, 2016 - Added switch docs
  • July 20, 2016 - Updated code snippets and added example images as placeholders