FieldColor

FieldColor is a color field that renders an input element of type color

type input

inputType color

Basic example

Code

{
    name: 'choiceColor',
    label: 'Choose a color',
    model: 'colorChoice',
    type: 'input',
    inputType: 'color'
}

• Hex: #3f3f3f
• As badge background: your color

Choose a color

Text input example

Code

{
    name: 'choiceColor',
    label: 'Choose a color',
    model: 'colorChoice',
    type: 'input',
    inputType: 'color',
    withInput: true
}

• Hex: #3f3f3f

Choose a color

Properties

Shared properties

Property	Default	Type	Description
name	-	string	Name of the field
model	-	string	Key of model in the form schema model
label	-	string	Label for the field
labelIcon	-	string | ComponentPublicInstance | LabelIconDefinition	Label for the field
type	-	string	Type of field, generally input if the field is an input.
inputType	-	string	Type of input, only required when type === 'input'
id	computed	string	id of the field
visible	true	Boolean | Function	Whether the field is visible, method will be passed the model, field and field component*
required	false	Boolean | Function	Whether the field is required, method will be passed the model, field and field component*
readonly	false	Boolean | Function	Whether the field is read only, method will be passed the model, field and field component*
disabled	false	Boolean | Function	Whether the field is disabled, method will be passed the model, field and field component*
hint	-	string | Function	Hint to display underneath the field, can be passed a method*
validator	computed	Array<Function> | Function | undefined	A (list of) validator(s) to be validating the field against.
validate	onBlur	'onChanged' | 'onBlur'	Method of validation for the field.
onValidated	-	Function | undefined	Method to be called after validation has been completed.

* see determineDynamicAttribute() for more information.

WARNING

When withInput is true, a validator for the hex value is added by default. Even though the hex value might technically be valid, the native color picker only supports 6 digit hex codes. See MDN docs.

Property	Default	Type	Description
withInput	false	boolean	If true, renders an extra input field of type text