Semantic UI theme, fields and widgets for react-jsonschema-form
.
Explore the docs »
View Playground
·
Report Bug
·
Request Feature
- Table of Contents
- About The Project
- Getting Started
- Usage
- Optional Semantic UI Theme properties
- Roadmap
- Contributing
- Contact
Exports semantic-ui
theme, fields and widgets for react-jsonschema-form
.
- See the getting started guide on react-semantic-ui.
@semantic-ui-react >= 0.87.0
-
@semantic-ui-css >= 2.4.1
(default theme for semantic-ui); see theming guide if you wish to customize @rjsf/core >= 2.0.0
yarn add semantic-ui-css semantic-ui-react @rjsf/core
yarn add @rjsf/semantic-ui
import Form from '@rjsf/semantic-ui';
or
import { withTheme } from '@rjsf/core';
import { Theme as SemanticUITheme } from '@rjsf/semantic-ui';
// Make modifications to the theme with your own fields and widgets
const Form = withTheme(SemanticUITheme);
- To pass additional properties to widgets, see this guide.
- Semantic props for TextWidget
- Semantic props for CheckboxWidget
- Semantic props for SelectWidget
- Semantic props for RangeWidget
- Semantic props for RadioWidget
- Semantic props for PasswordWidget
- Semantic props for UpDownWidget
- Semantic props for TextAreaWidget
Below are the current default options for all widgets:
{
"ui:options": {
"semantic": {
"fluid": true,
"inverted": false,
"errorOptions": {
"size": "small",
"pointing": "above"
}
}
}
}
See the open issues for a list of proposed features (and known issues).
Read our contributors' guide to get started.
rjsf team: https://github.com/orgs/rjsf-team/people
GitHub repository: https://github.com/rjsf-team/react-jsonschema-form