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
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 |
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. |
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 |