`jsx
import validator from '@rjsf/validator-ajv8';
import Form from '@osahan/wordpress-ui';

const schema = {
type: 'object',
properties: {
bio: { type: 'string', title: 'Biography' },
role: {
type: 'string',
enum: ['admin', 'editor'],
enumNames: ['Administrator', 'Editor'],
},
},
};

const uiSchema = {
bio: {
'ui:widget': 'textarea',
'ui:options': { rows: 5 },
},
role: {
'ui:widget': 'radio',
},
};


`

$3

`jsx
import validator from '@rjsf/validator-ajv8';
import Form from '@osahan/wordpress-ui';

const schema = {
type: 'object',
properties: {
tags: {
type: 'array',
title: 'Tags',
items: { type: 'string' },
},
},
};

const uiSchema = {
tags: {
'ui:options': {
addButtonText: 'Add Tag',
},
},
};


`

$3

`jsx
import validator from '@rjsf/validator-ajv8';
import Form from '@osahan/wordpress-ui';

const schema = {
type: 'object',
properties: {
user: {
type: 'object',
title: 'User Information',
properties: {
name: { type: 'string', title: 'Name' },
email: { type: 'string', format: 'email', title: 'Email' },
},
},
},
};

const uiSchema = {
user: {
'ui:options': {
collapsible: true, // Enable collapsible panel (default: true)
defaultOpen: false, // Start collapsed (default: true, meaning open by default)
},
},
};


`

$3

You can control whether accordions start open or collapsed using the defaultOpen option in ui:options:

- defaultOpen: true (default) - Accordion starts open/expanded
- defaultOpen: false - Accordion starts collapsed/closed

Example - Start all accordions collapsed:

`jsx
const uiSchema = {
// This accordion will start collapsed
myObject: {
'ui:options': {
defaultOpen: false, // Accordion will be collapsed initially
},
},
// This accordion will start open (default behavior)
anotherObject: {
'ui:options': {
defaultOpen: true, // Explicitly set to open (this is the default)
},
},
// Default behavior (open) - no need to specify
thirdObject: {
// No ui:options needed - will default to open
},
};
`

$3

You can enable debug mode for any field or object to see its schema, uiSchema, formData, and idSchema. This is useful for troubleshooting form rendering issues.

`jsx
const uiSchema = {
// Enable debug for a specific field
myField: {
'ui:options': {
debug: true, // Shows debug panel with schema, uiSchema, formData, and idSchema
},
},
// Enable debug for an object field
myObject: {
'ui:options': {
debug: true, // Shows debug info for the object
},
},
};
`

When debug mode is enabled, a collapsible debug panel will appear below the field showing:
- Field ID: The unique identifier for the field
- Schema: The JSON schema definition for the field
- UI Schema: The UI schema configuration
- Form Data: The current form data value for the field
- ID Schema: The ID schema structure (for object fields)

This is particularly useful when debugging nested schemas or understanding how RJSF is processing your schema structure.
`

$3

You can make any field read-only (non-editable) using the readonly option in uiSchema:

`jsx
const uiSchema = {
// Make a field read-only
myField: {
'ui:readonly': true, // Field will be read-only (non-editable)
},

// You can also set readonly on the Form component for all fields
//

// Or make specific nested fields readonly
'color.link.value': {
'ui:readonly': true, // This specific field will be read-only
},
};
`

Options:
- 'ui:readonly': true - Makes the field read-only (non-editable)
- 'ui:readonly': false or not set - Field is editable (default)

Note: Read-only fields are visually disabled and cannot be edited by users. This is useful for displaying computed values, locked fields, or fields that should not be modified.
`

Controlled Components

When using this theme with controlled components (passing formData prop), make sure to handle onChange correctly:

`jsx
import { useState } from 'react';
import Form from '@osahan/wordpress-ui';
import validator from '@rjsf/validator-ajv8';

function MyForm() {
const [formData, setFormData] = useState({});

const handleChange = ({ formData }) => {
// Only update if data actually changed to prevent unnecessary re-renders
setFormData(formData);
};

return (
schema={schema}
formData={formData}
onChange={handleChange}
validator={validator}
/>
);
}
`

Important: This package follows the same pattern as @rjsf/react-bootstrap - it's a simple theme wrapper around RJSF's Form component. If you're experiencing infinite loops, check:

1. Are you updating formData in onChange without checking if it actually changed?
2. Are you using deep equality checks before updating state?
3. Is your onChange handler causing unnecessary re-renders?

Styling

$3

WordPress component styles are NOT automatically imported to prevent conflicts in WordPress environments where styles are already loaded via wp_enqueue_style().

In WordPress environments, no action is needed - styles are already available.

$3

For non-WordPress environments (standalone React apps), you need to import WordPress component styles manually:

`jsx
import '@wordpress/components/build-style/style.css';
import Form from '@osahan/wordpress-ui';
`

$3

All custom styles are scoped under .rjsf to prevent CSS bleeding into other parts of your application. The library only injects styles for:

- Sticky accordion panel titles
- Nested panel indentation
- Focus highlighting

These styles only apply within RJSF forms and won't affect other WordPress components or your application's styles.

Demo / Kitchen Sink

A comprehensive demo showcasing all widgets and templates is available:

🌐 Live Demo: View on GitHub Pages

The demo is also available locally in the demo directory.

$3

From the project root:

`bash
npm run demo
`

Or manually:

`bash
cd demo
npm install --legacy-peer-deps
npm run dev
`

The demo will open at http://localhost:3000 and includes:
- All 17 widgets
- All templates
- Form validation examples
- Real-time form data display
- Array and object field examples

Development

$3

`bash


Run all tests

`
src/
├── widgets/ # All widget components
├── templates/ # All template components
│ └── buttons/ # Button templates
├── fields/ # Field components
└── index.ts # Main theme export
`

API Reference

$3

The package exports both the theme object and a pre-configured Form component:

`typescript
import Form, { wordpressUITheme } from '@osahan/wordpress-ui';
import { withTheme, type ThemeProps } from '@rjsf/core';

// Use the pre-configured Form component (recommended)


// Or use withTheme HOC for advanced usage
const ThemedForm = withTheme(wordpressUITheme);


// Theme structure
const theme: ThemeProps = {
widgets: {
BaseInput,
TextWidget,
InputWidget,
SelectWidget,
CheckboxWidget,
TextareaWidget,
RadioWidget,
CheckboxesWidget,
NumberWidget,
PasswordWidget,
EmailWidget,
URLWidget,
DateWidget,
DateTimeWidget,
TimeWidget,
UpDownWidget,
RangeWidget,
HiddenWidget,
},
templates: {
ArrayFieldItemTemplate,
ArrayFieldTemplate,
BaseInputTemplate,
ButtonTemplates: {
AddButton,
CopyButton,
MoveDownButton,
MoveUpButton,
RemoveButton,
SubmitButton,
},
DescriptionFieldTemplate,
ErrorListTemplate,
FieldErrorTemplate,
FieldHelpTemplate,
FieldTemplate,
GridTemplate,
MultiSchemaFieldTemplate,
ObjectFieldTemplate,
OptionalDataControlsTemplate,
TitleFieldTemplate,
WrapIfAdditionalTemplate,
},
fields: {
TitleField,
DescriptionField,
},
};
`

Compatibility

- react-jsonschema-form: ^6.1.2
- React: ^18.0.0
- @wordpress/components: ^28.6.0

$3

This library is designed to work seamlessly in WordPress environments:

- ✅ No duplicate styles - WordPress component styles are not automatically imported
- ✅ Scoped CSS - All custom styles are scoped under .rjsf to prevent conflicts
- ✅ WordPress admin compatibility - Uses native WordPress components that match admin UI

When using in WordPress, ensure WordPress component styles are enqueued via wp_enqueue_style()` - the library will use them automatically.

Contributing

Contributions are welcome! Please ensure all tests pass before submitting a pull request.

License

MIT

Related Projects

- react-jsonschema-form - The core form library
- @wordpress/components - WordPress component library
- @rjsf/react-bootstrap - Bootstrap theme (inspiration)