Form

Form is a component to present HTML forms

Form is customized version of Semantic UI-React's Form component, so all properties of that component can be used here.

errors prop can be just a string containing error message or an object with the following syntax:

{
     field1: 'errorMessage1',
     field2: 'errorMessage2',
     ...
}

Access

Stage.Basic.Form

Usage

Form before submission (no errors: _.isEmpty(this.state.errors))

Form after submission (with errors: !_.isEmpty(this.state.errors))

<Form onSubmit={this._submitCreate.bind(this)} errors={this.state.errors} ref="createForm">
  <Form.Field error={this.state.errors.username}>
    <Form.Input name='username' placeholder="Username"
                value={this.state.username} onChange={this._handleInputChange.bind(this)}/>
  </Form.Field>

  <Form.Field error={this.state.errors.password}>
    <Form.Input name='password' placeholder="Password" type="password"
                value={this.state.password} onChange={this._handleInputChange.bind(this)}/>
  </Form.Field>

  <Form.Field error={this.state.errors.confirmPassword}>
    <Form.Input name='confirmPassword' placeholder="Confirm password" type="password"
                value={this.state.confirmPassword} onChange={this._handleInputChange.bind(this)}/>
  </Form.Field>

  <Form.Field error={this.state.errors.role}>
    <Form.Dropdown selection name='role' placeholder="Role" options={roleOptions}
                   value={this.state.role} onChange={this._handleInputChange.bind(this)}/>
  </Form.Field>
</Form>