Semantic-UI Customization

There are various options to pass to semantic theme fields.

Note that every semantic property within uiSchema can be rendered in one of two ways: {"ui:options": {semantic:{[property]: [value]}}}

In other words, the following uiSchema is equivalent:

Note: All fields have the following settings below as their default

fluid: Take on the size of its container.
inverted: Format to appear on dark backgrounds.

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

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

errorOptions

The uiSchema semantic object accepts an errorOptions property for each field of the schema:

size: determines the size of the error message dialog
pointing: determines the direction of the arrow on the error message dialog

Below are the current defaults

import { UiSchema } from '@rjsf/utils';

const uiSchema: UiSchema = {
 'ui:options': {
 semantic: {
 errorOptions: {
 size: 'small',
 pointing: 'above',
 },
 },
 },
};

semantic options uiSchema for array items

To specify a uiSchema that applies to array items, specify the semantic uiSchema value within the ui:options property:

wrapItem: wrap each array item in a Segment
horizontalButtons: vertical buttons instead of the default horizontal

import { RJSFSchema, UiSchema } from '@rjsf/utils';
import validator from '@rjsf/validator-ajv8';

const schema: RJSFSchema = {
 type: 'array',
 items: {
 type: 'string',
 },
};

const uiSchema: UiSchema = {
 'ui:options': {
 semantic: {
 wrapItem: true,
 horizontalButtons: false,
 },
 },
};

render(<Form schema={schema} uiSchema={uiSchema} validator={validator} />, document.getElementById('app'));

formContext

The formContext semantic object accepts wrapContent ,wrapLabel properties.

wrapContent: wrap all inputs field content in a div, for custom styling
wrapLabel: wrap all labels in a div, for custom styling via CSS

<Form
 formContext={{
 semantic: {
 wrapLabel: true,
 wrapContent: true,
 },
 // other props...
 }}
/>