Field

The field component is responsible for implementing many of the lower level form components such as labels, validations, and hints.

Props

NameTypeDescription
children
node
validations
arrayA list of validations
permissions
arrayAny disabling permissions for this field
label
nodeA label to be displayed above the input
labelAction
nodeA secondary label - This can be a function (for example, to toggle an option)
labelProps
shapeProps to pass down to the label component
htmlFor
stringSets the 'for' property to bind a label and input
hint
stringA string to provide additional information to the user
hintIcon
unionAn optional icon to be displayed next to the hint
required
boolDisplays an asterisk next to the label if the field is required
locked
boolDisplays a padlock if the field is locked - mainly used for templates
icon
unionAn icon to display next to the label
onClick
func
className
stringA classname to pass down
centered
boolCenters the field and children components
controlChildren
boolToggles ability for component to override child props
onBlur
funcon blur handler to pass to input children
inline
boolDisplays the field inline with the label and input floated
labelWidth
numberSet a width for the field label
useLegacyLayout
bool

Field

A basic form field in intial state
<Field label="Your email"> <Input placeholder="hello@kalohq.com" /> </Field>

Field with validation

A field with an input with validations
Your email was not valid
<Field label="Your email" validations={[ { message: 'Your email was not valid' } ]} > <Input placeholder="hello@kalohq.com" /> </Field>

Field with required status

Adds an asterisk to display that a field is required
<Field label="Your email" required={true} > <Input placeholder="hello@kalohq.com" /> </Field>

Field with locked status

A lock icon can be shown to signify that the input is locked
<Field label="Your email" locked={true} > <Input placeholder="hello@kalohq.com" /> </Field>

Field with action label

A secondary action label can be added
Show map
<Field label="Your home city" labelAction={<Text onClick={function noRefCheck() {}} size="extra-small">Show map</Text>} > <Input placeholder="London" /> </Field>

Field with hint

Useful for providing information about what the input is required for
This will become your login username
<Field hint="This will become your login username" hintIcon="info" label="Your email" > <Input placeholder="hello@kalohq.com" /> </Field>

Inline field

Displays the field with the label and input on the same line
<Field inline={true} label="Your email" labelWidth={100} > <Input placeholder="hello@kalohq.com" /> </Field>