https://github.com/rsuite/schema-form
Form generation and validation based on schema-typed and rsuite
https://github.com/rsuite/schema-form
form schema validation
Last synced: 5 months ago
JSON representation
Form generation and validation based on schema-typed and rsuite
- Host: GitHub
- URL: https://github.com/rsuite/schema-form
- Owner: rsuite
- License: mit
- Created: 2019-01-04T06:30:21.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2020-10-03T07:50:14.000Z (over 5 years ago)
- Last Synced: 2024-10-30T00:00:13.078Z (about 1 year ago)
- Topics: form, schema, validation
- Language: JavaScript
- Homepage: https://rsuite.github.io/schema-form/
- Size: 716 KB
- Stars: 17
- Watchers: 3
- Forks: 1
- Open Issues: 3
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# schema-form
Form generation and validation based on `schema-typed` and `rsuite`.
## Installation
```
npm install @rsuite/schema-form --save
```
## Usage
```js
import SchemaForm from '@rsuite/schema-form';
import { InputNumber, SelectPicker, Schema } from 'rsuite';
const { StringType, NumberType } = Schema.Types;
const Form = SchemaForm([
{
key: 'username',
type: StringType().isRequired('This field is required'),
label: 'Username'
},
{
key: 'email',
type: StringType().isEmail('Please enter a valid email address'),
label: 'Email',
helpBlock: 'Please enter your company email address'
},
{
key: 'age',
type: NumberType('Please enter a valid number'),
label: 'Age',
componentClass: InputNumber,
componentProps: {
autoComplete: 'off',
}
},
{
key: 'group',
type: NumberType(),
label: 'User Group',
componentClass: SelectPicker,
componentProps: {
style: {
width: 300
},
data: [{ value: 1, label: 'Admin' }, { value: 2, label: 'User' }],
}
}
]);
ReactDOM.render(, mountNode);
```
## Documentation
- [Form examples](https://rsuitejs.com/en/components/form#Examples)
- [Form props](https://rsuitejs.com/en/components/form#Props)
## License
MIT licensed