skip to main content
skip to navigation sidebar
skip to context sidebar
A next-generation tool to create blazing-fast documentation sites
API
Blog
Tutorial
Showcase
twitter
github
Edit this page
created:8/18/2020
updated:4/4/2021
byatanasster
documentationcontrols

Pre-defined controls

The controls api comes with a selection of pre-defined controls that can be used to create interactive examples of your components.

ControlTypes.TEXT

userName: {
  type: ControlTypes.TEXT,
  label: 'Name',
  value: 'Storyteller',
}
all properties of ControlType in addition to:
NameTypeDescription
escapeValuebooleanallows to receive escaped string values to help prevent XSS attacks by default - false
placeholderstringplaceholder for empty properties either undefined initial value or user clears the field
rowsnumbernumber of rows for a TextArea field for longer text by default, only 1 row = means a Input field > 1 rows = an area field
some text
Name
Description
Default
Controls
text
text
some text
more examples

ControlTypes.NUMBER

age: {
  type: ControlTypes.NUMBER,
  label: 'Age',
  value: 78,
  range: true,
  min: 0,
  max: 90,
  step: 5,
},
all properties of ControlType in addition to:
NameTypeDescription
maxnumbermaximum allowed value for numeric property
minnumberminimum allowed value for numeric property
rangebooleanif true, will display a range type slider editor
stepnumberstepper for numeric editor /i nc/dec value
7
Name
Description
Default
Controls
number
ControlTypes.NUMBER
7
Invalid Type
more examples

ControlTypes.BOOLEAN

nice: {
  type: ControlTypes.BOOLEAN,
  label: 'Nice',
  value: true,
},
all properties of ControlType
TRUE
Name
Description
Default
Controls
bool
ControlTypes.BOOLEAN
true
Invalid Type
more examples

ControlTypes.OPTIONS

fruit: {
  type: ControlTypes.OPTIONS,
  label: 'Fruit',
  value: 'apple',
  options: {
    Apple: 'apple',
    Banana: 'banana',
    Cherry: 'cherry',
  },
},
all properties of ControlType in addition to:
NameTypeDescription
options*Record<string, number | string[] | number[] | { label: string; value: any }>
display'select' | 'multi-select' | 'radio' | 'inline-radio' | 'check' | 'inline-check'how to render selecting the options: default is 'select'
watermelon
Name
Description
Default
Controls
options
ControlTypes.OPTIONS
[
  "watermelon"
]
Invalid Type
more examples

ControlTypes.DATE

birthday: {
  type: ControlTypes.DATE,
  label: 'Birthday',
  value: new Date(),
},
all properties of ControlType in addition to:
NameTypeDescription
datePickerbooleanwhether to display a date picker (calendar). default: true
timePickerbooleanwhether to display a time picker (calendar). default: true
Invalid Date
Name
Description
Default
Controls
date
ControlTypes.DATE








































































































































































































































































































































































































































































































































































































































new Date('01/01/2020')
Invalid Type
more examples

ControlTypes.COLOR

color: {
  type: 'color',
  value: '#000000',
},
all properties of ControlType in addition to:
NameTypeDescription
kind'hex' | 'rgb' | 'rgba' | 'hsl' | 'hsla'in what format to save the color as a string (default to hex)
#555
Name
Description
Default
Controls
color
ControlTypes.COLOR
#555
Invalid Type
more examples

ControlTypes.BUTTON

button: {
  type: ControlTypes.BUTTON,
  onClick: () => {
    // .. code to modify some variables
  }
},
all properties of ControlType in addition to:
NameTypeDescription
onClickfunction (prop*: ComponentControlButton): void;for button type fields, an onClick handler
Name
Description
Default
Controls
onClick
ControlTypes.BUTTON
































































































































































































































































































































































































































































































































































































































































































































































































































































() => console.log('clicked')
Invalid Type
more examples

ControlTypes.OBJECT

style: {
  type: ControlTypes.OBJECT,
  label: 'Styles',
  value: {
    // do not randomize the border style
    border: { type: ControlTypes.TEXT, value: '2px dashed silver', data: null },
    borderRadius: { type: ControlTypes.NUMBER, value: 10 },
    padding: { type: ControlTypes.NUMBER, value: 10 },
  },
}
all properties of ControlType in addition to:
NameTypeDescription
editLabelstringthe label for the editor button
Name
Description
Default
Controls
style
ControlTypes.OBJECT
{
  "color": {
    "type": "ControlTypes.COLOR",
    "value": "red"
  },
  "backgroundColor": {
    "type": "ControlTypes.COLOR",
    "value": "lightgrey"
  },
  "padding": {
    "type": "ControlTypes.NUMBER",
    "value": 2,
    "step": 5,
    "label": "padding (px.)"
  }
}
Invalid Type
more examples

ControlTypes.ARRAY

arrayItems: {
  type: ControlTypes.ARRAY,
  label: 'Items',
  rowType: {
    name: { type: ControlTypes.TEXT },
  },
  value: [{ name: 'Laptop' }, { name: 'Book' }, { name: 'Whiskey' }],
},
all properties of ControlType in addition to:
NameTypeDescription
rowType*ComponentControlstype of the items in each row of the array
editLabelstringthe label for the editor button
Name
Description
Default
Controls
array
ControlTypes.ARRAY
[
  {
    "label": "Button 1",
    "color": "red"
  },
  {
    "label": "Button 2",
    "color": "grey"
  }
]
Invalid Type
more examples

ControlTypes.FILES

images: {
  type: ControlTypes.FILES,
  label: 'Happy Picture',
    accept: 'image/*',
    value: [
    'data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII=',
  ],
},
all properties of ControlType in addition to:
NameTypeDescription
acceptstringtype of files to accept user to open ex 'image/*',
run time control
Name
Description
Default
Controls
files
ControlTypes.FILES
[
  "data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAQAAAC1+jfqAAAABGdBTUEAALGPC/xhBQAAACBjSFJNAAB6JgAAgIQAAPoAAACA6AAAdTAAAOpgAAA6mAAAF3CculE8AAAAAmJLR0QA/4ePzL8AAAAHdElNRQfiARwMCyEWcOFPAAAAP0lEQVQoz8WQMQoAIAwDL/7/z3GwghSp4KDZyiUpBMCYUgd8rehtH16/l3XewgU2KAzapjXBbNFaPS6lDMlKB6OiDv3iAH1OAAAAJXRFWHRkYXRlOmNyZWF0ZQAyMDE4LTAxLTI4VDEyOjExOjMzLTA3OjAwlAHQBgAAACV0RVh0ZGF0ZTptb2RpZnkAMjAxOC0wMS0yOFQxMjoxMTozMy0wNzowMOVcaLoAAAAASUVORK5CYII="
]
Invalid Type
more examples
Previous
Reference/Controls API
Next
Reference/Configuration types