Configurable components
Snippets of these configurable components can be added to your schemas to create a tailored content authoring experience.
Configurable color picker
- Can be used with a property of type
string and format color
- Take colors of either
hex or RGBA, with hex being the default
- Array of colors displayed as swatches in color picker
Multi-line text area
- Renders single or multi-line text
- Choose whether text area should grow with content
- Specify number of rows using minRow and maxRow
Integers and numbers
- Choose between components of type
integer or number
- Displayed through an editable text box with arrows
- Use negative numbers, add suffixes and more
Droplist with labels
- Shows a list of labels and values
- Populated using the
oneOf keyword
- Used with
string, integer and number
Configurable slider
- Used with properties of type
integer or type number
- Marks displayed in array of
value and label
- Inverted parameter set to
true or false
Date and time picker
- Used with property type
string and format date-time
- Placeholder text can be specified
- Represents user selectable date and time
Time input
- Represents a user selectable time
- Used with property type
string and format time
- Cursor pointer can be shown using
true or false
Date and time input
- Used with the
date-time-input property type
- Users can enter a date and time using edit fields
Date picker
- Used with a property of type
string and format date
- Date format can be defined
- Placeholder text can be specified
Arrays and objects
- Reduce amount of space object takes up by hiding properties
- Opt to set array or object to be initially collapsed
- withHeader parameter can be set to true or false
Grid layout
- Allows you to group related properties in columns
- Use parameters like the
columns to specify how columns are displayed
- Each item in
columns includes a span and pointers array
Tabs layout
- Organise your form so it can be navigated using tabs
- Specify tab labels, default tab and properties
- Tabs can also be configured to show vertically
