import Field from '@orloxx/ui-core/src/views/form/field.view.js'

public class | source

Field

Extends:

react~Component → Field

Direct Subclass:

CheckboxField, DropdownField, EmailField, ImageField, RadioField, TextareaField

Base class for all form fields. It's supposed to be used as a super class but in case it's used as a component it renders an input type text

SCSS Import

@import "~@orloxx/ui-core/scss/form/field";

Example:

<Field id='username' name='username'
  label='Username' placeholder='Enter your username'
  suggestion='Only accepts letters and numbers'
  patternError='Input format is wrong, only accepts letters and numbers'
  required pattern='^[a-zA-Z0-9]+$' />

Static Member Summary

Static Public Members
public static	propTypes: Object

Static Public Members

public static propTypes: Object source

Properties:

Name	Type	Attribute	Description
id	String		The input element `id` attribute
name	String		The input element `name` attribute
label	String		The label attached to the input field
type	String	optional default: 'text'	The input element `type` attribute
required	Boolean	optional	The input element `required` attribute
pattern	String	optional	The pattern to validate the input's value
placeholder	String	optional	Placeholder text
requiredLabel	String	optional default: '(required)'	The required label added to the input's label
requiredError	String	optional default: 'This field is required'	The error message when the required input is empty
patternError	String	optional default: 'Please enter correct format'	The error message when the input's pattern is not matched
suggestion	String	optional	Suggestion text for the user