@rjsf/semantic-ui

[![Build Status][build-shield]][build-url]
[![npm][npm-shield]][npm-url]
[![npm downloads][npm-dl-shield]][npm-dl-url]
[![Contributors][contributors-shield]][contributors-url]
[![Apache 2.0 License][license-shield]][license-url]

rjsf-semantic-ui

Semantic UI theme, fields and widgets for react-jsonschema-form.


Explore the docs »




View Playground
·
Report Bug
·
Request Feature

Table of Contents

- 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.

$3

- react-jsonschema-form
- Semantic UI

Getting Started

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

$3

- @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

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

$3

`sh
yarn add @rjsf/semantic-ui
`

Usage

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

or

`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

- 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

#### 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

[build-shield]: https://github.com/rjsf-team/react-jsonschema-form/workflows/CI/badge.svg
[build-url]: https://github.com/rjsf-team/react-jsonschema-form/actions
[contributors-shield]: https://img.shields.io/github/contributors/rjsf-team/react-jsonschema-form.svg
[contributors-url]: https://github.com/rjsf-team/react-jsonschema-form/graphs/contributors
[license-shield]: https://img.shields.io/badge/license-Apache%202.0-blue.svg?style=flat-square
[license-url]: https://choosealicense.com/licenses/apache-2.0/
[npm-shield]: https://img.shields.io/npm/v/@rjsf/semantic-ui/latest.svg?style=flat-square
[npm-url]: https://www.npmjs.com/package/@rjsf/semantic-ui
[npm-dl-shield]: https://img.shields.io/npm/dm/@rjsf/semantic-ui.svg?style=flat-square
[npm-dl-url]: https://www.npmjs.com/package/@rjsf/semantic-ui
[product-screenshot]: https://raw.githubusercontent.com/rjsf-team/react-jsonschema-form/59a8206e148474bea854bbb004f624143fbcbac8/packages/semantic-ui/screenshot.png