5arias / yarff Goto Github PK
View Code? Open in Web Editor NEWYet Another React Form(ik) Framework
Yet Another React Form(ik) Framework
Field wrapper to map field components
Required:
choices
label
name
type
Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
value
Checkbox, Radio, and Select field types allow for their choice options to dynamically update
based on the string value of a single parent field. Dynamic choice options are defined by two
objects. The first object accepts two parameters:
string
object
The second, nested choices
object is a key/value pair:
string
value which matches parent field valuearray
of choice objects to display{
type: 'select',
name: 'dynamic_choice_field',
choices: {
parentField: 'sample_parent_field',
choices: {
orange: [
{ label: 'Tangerine', value: 'tangerine'},
{ label: 'Clementine', value: 'clementine' },
{ label: 'Navel', value: 'navel' }
],
apple: [
{ label: 'Honeycrisp', value: 'honeycrisp' },
{ label: 'McIntosh', value: 'mcintosh' },
{ label: 'Ambrosia', value: 'ambrosia' },
{ label: 'Empire', checked: true, value: 'empire' },
{ label: 'Granny Smith', value: 'granny_smith' }
],
lemon: [
{ label: 'Meyer', checked: true, value: 'meyer' },
{ label: 'Ponderosa', value: 'ponderosa' }
]
}
}
}
The Form
component supports a repeatable
field type which accepts and array of field objects
to define a field group. This helps the user with common array/list manipulations, such as "add
another address or person".
The field returns an array of key/value objects for each field group the user adds.
fields
- array of field objectslabel
- stringname
- stringaddButton
- props object to customize the add button. Supports a text
property to replace the default +
and all other props will be passed to the Button
componentclassName
- Additional classes to be added to the root div
elementdeleteButton
- props object to customize the delete button for all field groups. Supports a text
property to replace the default -
and all other props will be passed to the Button
componenthint
- Additional hint text to displaylabelClassName
- Additional classes to be added to the labelmax
- maximum number of field groups allowedrequirementLabel
- Text showing the requirement ("Required", "Optional", etc.).{
type: 'repeatable',
label: 'This is a repeatable set of fields',
name: 'repeat_all_the_fields',
fields: [
{
type: 'text',
name: 'repeat_input',
label: 'Repeat Input'
}
]
}
The Form
component supports logic for navigating to specific form pages;
including conditional navigation based on form field answers. By default, the
form will navigate sequentially through the pages
array. Branching is defined
by adding the optional action
object to a page
object.
action
objectpages: [
{
id: 'page_1',
action: {
type: 'goto',
pageId: 'another_page_id' || (values) => {
if(values.field_1 === 'A') {
return 'page_3'
} else {
return 'page_2'
}
},
buttonText: 'Custom continue button text'
}
}
]
type
: options aregoto** andnext**(default).pageId
: accepts either astring** orfunction**.
buttonText
: optional string for custom text applied to the "continue" orExtend input field and use inputMode
, type
, and pattern
to number
in order to improve a11y. See this documentation: https://technology.blog.gov.uk/2020/02/24/why-the-gov-uk-design-system-team-changed-the-input-type-for-numbers/
Required:
label
name
type
Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
inputClassName
id
labelClassName
labelId
requirementLabel
value
**Conditions should be defined on each field object rather than nested array for conditional fields coupled to a single parent field. This will allow fields to satisfy conditions with multiple parents, including those on other pages. **
The Form
component provides a simple way to define additional fields that
will be conditionally displayed based on user selected values.
For example: a radio field has a choice of Other
, and when the user selects
Other
a new text field is displayed for the user to enter the custom value.
Negative conditions (not
) are supported where a field should not be displayed if the parent
value matches the designated value(s). Negation supercedes value
conditions such that a field
will not be displayed if the parent value matches both a value
and not
condition.
value = 'any'
is supported where you want to display a conditional field once the parent field
has any valid field value (i.e. not an empty string or array.)
Each field defined in the JSON fields
array has an optional attribute named
conditionals
. It has three attributes:
type: 'radio',
choices: [
{ label: 'A', value: 'A' },
{ label: 'B', value: 'B' },
{ label: 'C', value: 'C' },
{ label: 'Other', value: 'Other' }
],
name: 'select_1',
conditionals: [
{
value: 'Other',
not: 'C',
fields: [
{
type: 'text',
label: 'Enter other value',
name: 'select_1_other'
}
]
}
The Form
component supports content
field types which accept a Component function to be rendered. They are provided the all RHF props and actions, in addition to internal form values.
Content fields are removed from the form value set.
goBackToPage
- function to return to a form page in the pageHistory.pageHistory
- array of page indexes (integers) that have been visited in the form.pages
- array of page objects provided in the form schema.Required:
label
name
type
Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
rows
value
Required:
choices
label
name
type
Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
value
Basic input field
Required:
label
name
type
Additional Props:
defaultValue
disabled
errorMessage
inputClassName
id
labelClassName
labelId
requirementLabel
value
Required:
children
label
name
type
Additional Props:
ariaLabel
checked
checkedChildren
uncheckChildren
className
defaultChecked
disabled
errorMessage
hint
inputClassName
id
labelClassName
value
Required:
label
name
type
Additional Props:
ariaLabel
className
defaultValue
disabled
errorMessage
hint
inputClassName
id
labelClassName
labelId
requirementLabel
value
A declarative, efficient, and flexible JavaScript library for building user interfaces.
๐ Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. ๐๐๐
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google โค๏ธ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.