Skip to content

FieldColor

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

type input

inputType color

Basic example

Code
javascript
{
    name: 'choiceColor',
    label: 'Choose a color',
    model: 'colorChoice',
    type: 'input',
    inputType: 'color'
}
  • Hex: #3f3f3f
  • As badge background: your color

Text input example

Code
javascript
{
    name: 'choiceColor',
    label: 'Choose a color',
    model: 'colorChoice',
    type: 'input',
    inputType: 'color',
    withInput: true
}
  • Hex: #3f3f3f

Properties

Shared properties
PropertyDefaultTypeDescription
name-stringName of the field
model-stringKey of model in the form schema model
label-stringLabel for the field
type-stringType of field, generally input if the field is an input.
inputType-stringType of input, only required when type === 'input'
idcomputedstringid of the field
visibletrueBoolean | FunctionWhether the field is visible, method will be passed the model, field and field component*
requiredfalseBoolean | FunctionWhether the field is required, method will be passed the model, field and field component*
readonlyfalseBoolean | FunctionWhether the field is read only, method will be passed the model, field and field component*
disabledfalseBoolean | FunctionWhether the field is disabled, method will be passed the model, field and field component*
hint-string | FunctionHint to display underneath the field, can be passed a method*
validatorcomputedArray<Function> | Function | undefinedA (list of) validator(s) to be validating the field against.
onValidated-Function | undefinedMethod 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.

PropertyDefaultTypeDescription
withInputfalsebooleanIf true, renders an extra input field of type text