Manual Reference Source
public class | source

Form

Extends:

react~Component → 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

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

Form

<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>

Static Member Summary

Static Public Members
public static

Button: *

Form checkbox input, see Button

public static

Form checkbox input, FormCheckbox

public static

Form color picker input, see ColorPicker

public static

Divider: *

Form divider, see FormDivider

public static

Dropdown field, see Dropdown

public static

Field: *

Form field, see FormField

public static

File: *

Form file input, see InputFile

public static

Group: *

Form group, see FormGroup

public static

Input: *

Form input, see Form.Input

public static

Calendar picker input, see InputDate

public static

Time picker input, see InputTime

public static

Json: *

Form JSON input,

public static

Radio: *

Form radio button, see Input

public static

Table: *

Form table input, see EdiTable

public static

Form text area input, see TextArea

public static

Form URL or file input, see InputUrlOrFile

public static

propTypes

Static Public Members

public static Button: * source

Form checkbox input, see Button

public static Checkbox: * source

Form checkbox input, FormCheckbox

public static ColorPicker: * source

Form color picker input, see ColorPicker

public static Divider: * source

Form divider, see FormDivider

public static Dropdown: * source

Dropdown field, see Dropdown

public static Field: * source

Form field, see FormField

public static File: * source

Form file input, see InputFile

public static Group: * source

Form group, see FormGroup

public static Input: * source

Form input, see Form.Input

public static InputDate: * source

Calendar picker input, see InputDate

public static InputTime: * source

Time picker input, see InputTime

public static Json: * source

Form JSON input,

public static Radio: * source

Form radio button, see Input

public static Table: * source

Form table input, see EdiTable

public static TextArea: * source

Form text area input, see TextArea

public static UrlOrFile: * source

Form URL or file input, see InputUrlOrFile

public static propTypes: * source

propTypes

Properties:

NameTypeAttributeDescription
errors object
  • optional

string with error message or object with fields error messages (syntax described above)

errorMessageHeader string
  • optional

string with error message header

onSubmit Function
  • optional

function called on form submission

onErrorsDismiss Function
  • optional

function called when errors are dismissed (see ErrorMessage)

scrollToError boolean
  • optional
  • default: false

if set, then on error change screen will be scrolled to (see ErrorMessage)