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
  • Built With
• Getting Started
  • Prerequisites
  • Installation
• Usage
• Optional Semantic UI Theme properties
  • Semantic Widget Optional Properties
  • Custom Semantic Widget Properties
• Roadmap
• Contributing
• Contact

Exports semantic-ui theme, fields and widgets for react-jsonschema-form.

• react-jsonschema-form
• Semantic UI

• 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