Field
Notes
A form field with validation support.
Props
- children
node
*Text or element(s) used as children of the field's
label
element. - className
string
- containerProps
object
Props applied to the field's outer container.
- customFieldStatus
bool
A flag indicating that the field uses a custom element to display field status and should not wrap error messages in a
FieldStatus
component. - defaultValue
string
- displayStatus
bool
A flag indicating that the field should display its error message irrespective of the field's error status. If set to
true
, the error message will display no matter what. If set tofalse
, it will never display. - error
bool
[false]
A flag indicating that the field is in an error state.
- errorMessage
node
A message to display when the field is in an error state. Wrapped in a
FieldStatus
component by default. - floatLabelActiveText
string
Optional text used as field's
label
element when the the field is in an active state. - floatLabelAriaHidden
bool
[false]
Set to true to hide float label text from screen readers
- floatLabelId
string
Optional id to be set on the associated label, can be useful for creating accessibility relationships between elements
- floatLabelVisible
bool
[true]
Set to false to only show the label when the field does not have a value
- id
string
* - inputAddon
node
An additional element rendered within the field after the
input
element. Used to apply extra buttons and labels on the edges of fields. - hintText
node
Optional hint text to be displayed.
- name
string
- onChange
func
- onBlur
func
- onFocus
func
- required
bool
- type
string
['text']
- value
string
Example: Field - Toggle error prop to true to see error message
<div><div className="p3"><Fieldid='email'error={ false }floatLabelActiveText="Email Address"errorMessage='Please enter a valid email address'required>Enter Email Address</Field></div><div className="bg-white p3"><Fieldid='email_white-bg'error={ false }floatLabelActiveText="Email Address"errorMessage='Please enter a valid email address'>Enter Email Address</Field></div><div className="p3"><Fieldid='email_hint_text'error={ false }floatLabelActiveText="Email Address"errorMessage='Please enter a valid email address'hintText='A valid email address consists of an email prefix and an email domain'required>Enter Email Address</Field></div></div>
Example: Mutliple fields arranged vertically
<div><Field id='firstNameStacked' className='mb2'>First Name</Field><Field id='lastNameStacked' className='mb2'>Last Name</Field><Fieldid='emailStacked'error={ true }errorMessage='Please enter a valid email address'>Email Address</Field></div>