README

<p align="center"> <a href="https://github.com/rjsf-team/react-jsonschema-form"> </a> <h3 align="center">rjsf-semantic-ui</h3> <p align="center"> Semantic UI theme, fields and widgets for <a href="https://github.com/rjsf-team/react-jsonschema-form/"><code>react-jsonschema-form</code></a>.

<a href="https://rjsf-team.github.io/react-jsonschema-form/docs/"><strong>Explore the docs »</strong></a>




<a href="https://rjsf-team.github.io/react-jsonschema-form/">View Playground</a>
·
<a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Report Bug</a>
·
<a href="https://github.com/rjsf-team/react-jsonschema-form/issues">Request Feature</a>

</p> </p>

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

About The Project

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

Built With

Getting Started

See the getting started guide on react-semantic-ui.

Prerequisites

@semantic-ui-react >= 2
@semantic-ui-css >= 2 (default theme for semantic-ui); see theming guide if you wish to customize
@rjsf/core >= 6
@rjsf/utils >= 6
@rjsf/validator-ajv8 >= 6

yarn add semantic-ui-css semantic-ui-react @rjsf/core

Installation

yarn add @rjsf/semantic-ui

Usage

javascript

import Form from '@rjsf/semantic-ui';

javascript

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);

Optional Semantic UI Theme properties

To pass additional properties to widgets, see this guide.

Semantic Widget Optional Properties

Custom Semantic Widget Properties

Below are the current default options for all widgets:

json

{
  "ui:options": {
    "semantic": {
      "fluid": true,
      "inverted": false,
      "errorOptions": {
        "size": "small",
        "pointing": "above"
      }
    }
  }
}

Roadmap

See the open issues for a list of proposed features (and known issues).

Contributing

Read our contributors' guide to get started.

Contact

rjsf team: https://github.com/orgs/rjsf-team/people

GitHub repository: https://github.com/rjsf-team/react-jsonschema-form

Table of Contents