Form
Extends:
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>
Static Member Summary
Static Public Members | ||
public static |
Button: * Form checkbox input, see Button |
|
public static |
Checkbox: * Form checkbox input, FormCheckbox |
|
public static |
ColorPicker: * Form color picker input, see ColorPicker |
|
public static |
Divider: * Form divider, see FormDivider |
|
public static |
Dropdown: * 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 |
InputDate: * Calendar picker input, see InputDate |
|
public static |
InputTime: * 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 |
TextArea: * Form text area input, see TextArea |
|
public static |
UrlOrFile: * Form URL or file input, see InputUrlOrFile |
|
public static |
propTypes: * propTypes |
Static Public Members
public static propTypes: * source
propTypes
Properties:
Name | Type | Attribute | Description |
errors | object |
|
string with error message or object with fields error messages (syntax described above) |
errorMessageHeader | string |
|
string with error message header |
onSubmit | Function |
|
function called on form submission |
onErrorsDismiss | Function |
|
function called when errors are dismissed (see ErrorMessage) |
scrollToError | boolean |
|
if set, then on error change screen will be scrolled to (see ErrorMessage) |