How to use the @data-driven-forms/react-form-renderer.componentTypes.TAB_ITEM function in @data-driven-forms/react-form-renderer
To help you get started, we’ve selected a few @data-driven-forms/react-form-renderer examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
data-driven-forms / react-forms / packages / react-renderer-demo / src / app / src / components / navigation / examples-definitions.js View on Github 
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
title: 'Apple',
component: componentTypes.TEXT_FIELD,
validate: [{
type: validatorTypes.REQUIRED,
}],
},
],
},
{
component: componentTypes.TAB_ITEM,
name: '2',
title: 'Vegetables',
description: 'Here you can find vegetables',
fields: [
{
name: 'carrot',
label: 'Carrot',
title: 'Carrot',
component: componentTypes.TEXT_FIELD,
},
],
},
],
}]},
variants: [],
},component: 'input',
value: 'Time Picker',
},
],
},
{
component: componentTypes.TABS,
link: `?component=${componentTypes.TABS}`,
linkText: 'Tabs / Tab item',
ContentText: TabsText,
value: { fields: [{
component: componentTypes.TABS,
name: 'tabs',
fields: [
{
component: componentTypes.TAB_ITEM,
validateFields: [ 'apple' ],
name: '1',
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
title: 'Apple',
component: componentTypes.TEXT_FIELD,
validate: [{
type: validatorTypes.REQUIRED,
}],
},
],
},component: 'input',
value: 'Time Picker',
},
],
},
{
component: componentTypes.TABS,
link: componentTypes.TABS,
linkText: 'Tabs / Tab item',
ContentText: TabsText,
value: { fields: [{
component: componentTypes.TABS,
name: 'tabs',
fields: [
{
component: componentTypes.TAB_ITEM,
validateFields: [ 'apple' ],
name: '1',
title: 'Fruits',
description: 'Here you can find fruits',
fields: [
{
name: 'apple',
label: 'Apple',
title: 'Apple',
component: componentTypes.TEXT_FIELD,
validate: [{
type: validatorTypes.REQUIRED,
}],
},
],
},},
{
label: 'Two',
value: '2',
},
{
label: 'Three',
value: '3',
},
],
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 4',
description: '',
key: '556',
fields: [
{
title: 'Datepickers',
key: '642',
fields: [
{
name: 'date_control_1',
label: 'Datepicker',
title: 'Datepicker',
component: components.DATE_PICKER,
},},
{
title: 'Text areas',
key: '638',
fields: [
{
name: 'textarea_box_1',
label: 'Text Area',
title: 'Text Area',
component: components.TEXTAREA_FIELD,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 2',
description: 'Checks',
key: '554',
fields: [
{
title: 'Check boxes',
key: '639',
fields: [
{
name: 'check_box_1',
label: 'Check Box',
title: 'Check Box',
component: components.CHECKBOX,
},},
{
title: 'Text areas',
key: '638',
fields: [
{
name: 'textarea_box_1',
label: 'Text Area',
title: 'Text Area',
component: components.TEXTAREA_FIELD,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 2',
description: 'Checks',
key: '554',
fields: [
{
title: 'Check boxes',
key: '639',
fields: [
{
name: 'check_box_1',
label: 'Check Box',
title: 'Check Box',
component: components.CHECKBOX,
},},
{
title: 'Text areas',
key: '638',
fields: [
{
name: 'textarea_box_1',
label: 'Text Area',
title: 'Text Area',
component: components.TEXTAREA_FIELD,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 2',
description: 'Checks',
key: '554',
fields: [
{
title: 'Check boxes',
key: '639',
fields: [
{
name: 'check_box_1',
label: 'Check Box',
title: 'Check Box',
component: components.CHECKBOX,
},},
{
title: 'Text areas',
key: '638',
fields: [
{
name: 'textarea_box_1',
label: 'Text Area',
title: 'Text Area',
component: components.TEXTAREA_FIELD,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 2',
description: 'Checks',
key: '554',
fields: [
{
title: 'Check boxes',
key: '639',
fields: [
{
name: 'check_box_1',
label: 'Check Box',
title: 'Check Box',
component: components.CHECKBOX,
},},
{
title: 'Text areas',
key: '638',
fields: [
{
name: 'textarea_box_1',
label: 'Text Area',
title: 'Text Area',
component: components.TEXTAREA_FIELD,
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 2',
description: 'Checks',
key: '554',
fields: [
{
title: 'Check boxes',
key: '639',
fields: [
{
name: 'check_box_1',
label: 'Check Box',
title: 'Check Box',
component: components.CHECKBOX,
options: [},
{
label: 'Three',
value: '3',
},
{
label: 'Two',
value: '2',
},
],
},
],
component: components.SUB_FORM,
},
],
component: components.TAB_ITEM,
},
{
title: 'Tab 4',
description: '',
key: '556',
fields: [
{
title: 'Datepickers',
key: '642',
fields: [
{
component: components.SELECT,
name: 'date_control_select',
label: 'Select',
options: [{
value: 'foo',@data-driven-forms/react-form-renderer
React Form Renderer. Data Driven Forms converts JSON form definitions into fully functional React forms.
Package Health Score
79 / 100Popular @data-driven-forms/react-form-renderer functions
- @data-driven-forms/react-form-renderer.componentTypes.CHECKBOX
- @data-driven-forms/react-form-renderer.componentTypes.DATE_PICKER
- @data-driven-forms/react-form-renderer.componentTypes.PLAIN_TEXT
- @data-driven-forms/react-form-renderer.componentTypes.RADIO
- @data-driven-forms/react-form-renderer.componentTypes.SELECT_COMPONENT
- @data-driven-forms/react-form-renderer.componentTypes.SUB_FORM
- @data-driven-forms/react-form-renderer.componentTypes.SWITCH
- @data-driven-forms/react-form-renderer.componentTypes.TAB_ITEM
- @data-driven-forms/react-form-renderer.componentTypes.TABS
- @data-driven-forms/react-form-renderer.componentTypes.TEXT_FIELD
- @data-driven-forms/react-form-renderer.componentTypes.TEXTAREA_FIELD
- @data-driven-forms/react-form-renderer.componentTypes.TIME_PICKER
- @data-driven-forms/react-form-renderer.componentTypes.WIZARD
- @data-driven-forms/react-form-renderer.layoutComponents.BUTTON
- @data-driven-forms/react-form-renderer.layoutComponents.BUTTON_GROUP
- @data-driven-forms/react-form-renderer.layoutComponents.DESCRIPTION
- @data-driven-forms/react-form-renderer.layoutComponents.FORM_WRAPPER
- @data-driven-forms/react-form-renderer.layoutComponents.TITLE
- @data-driven-forms/react-form-renderer.validatorTypes.PATTERN_VALIDATOR
- @data-driven-forms/react-form-renderer.validatorTypes.REQUIRED