🚀 Advanced Fields for Strapi

Professional custom fields for Strapi CMS that provide advanced functionality with comprehensive validation, dynamic options, and user-friendly interfaces.

📦 NPM Package: @webbycrown/advanced-fields

✨ Features

🔤 Advanced Input

• Text Input Field: Simple, clean text input with advanced validation
• Comprehensive Validation: Min/max length, regex patterns, required fields
• Custom Error Messages: User-friendly validation feedback
• Default Values: Pre-filled content for new entries
• Placeholder Support: Helpful hints for content creators
• Field Notes: Display helpful notes below the field
• Private Fields: Hide sensitive data from API responses

☑️ Advanced Checkbox

• Single & Multiple Modes: Toggle between single checkbox or multiple selections
• Dynamic Options: Define options with value|label format
• Min/Max Validation: Control minimum and maximum selections
• Layout Options: Vertical, horizontal, or grid layouts
• Default Selections: Pre-select options for new entries
• Field Notes: Display helpful notes below the field

🔘 Advanced Radio

• Single & Multiple Selection: Choose between single or multiple radio selections
• Dynamic Options: Flexible option configuration
• Selection Limits: Control minimum and maximum choices
• Layout Flexibility: Multiple visual layouts
• Custom Validation: Tailored error messages
• Field Notes: Display helpful notes below the field

🛠️ Installation

Via npm

npm install @webbycrown/advanced-fields

Via yarn

yarn add @webbycrown/advanced-fields

⚙️ Configuration

1. Install the plugin in your Strapi project
2. Restart your Strapi server
3. Navigate to Content-Type Builder
4. Add a new field and select one of the Advanced Fields:
   • Advanced Input
   • Advanced Checkbox
   • Advanced Radio

📖 Usage Examples

Advanced Input Configuration

1// Example: Text validation with custom error message and field note
2{
3  "required": true,
4  "maxLength": 255,
5  "minLength": 3,
6  "regex": "^[a-zA-Z0-9\\s]+$",
7  "options": {
8    "customErrorMessage": "Please enter valid text",
9    "placeholder": "Enter your text here",
10    "defaultValue": "Default text",
11    "fieldNote": "This field accepts alphanumeric characters and spaces only"
12  }
13}

Advanced Checkbox Configuration

1// Example: Multiple checkbox with validation and field note
2{
3  "required": true,
4  "options": {
5    "checkboxType": "multiple",
6    "checkboxOptions": "1|Option 1\n2|Option 2\n3|Option 3",
7    "minChoices": 1,
8    "maxChoices": 2,
9    "layout": "vertical",
10    "defaultSelected": "1\n2",
11    "fieldNote": "Please select at least 1 and at most 2 options"
12  }
13}

Advanced Radio Configuration

1// Example: Single radio with dynamic options and field note
2{
3  "required": true,
4  "options": {
5    "selectionType": "single",
6    "radioOptions": "small|Small\nmedium|Medium\nlarge|Large",
7    "layout": "horizontal",
8    "defaultSelected": "medium",
9    "fieldNote": "Choose the size that best fits your needs"
10  }
11}

🎯 Field Options Reference

Advanced Input Options

Advanced Checkbox Options

Advanced Radio Options

🔧 API Usage

Retrieving Data

1// GET /api/articles
2{
3  "data": [
4    {
5      "id": 1,
6      "attributes": {
7        "title": "Sample Article",
8        "advancedInput": "user@example.com",
9        "advancedCheckbox": ["1", "2"],
10        "advancedRadio": ["medium"]
11      }
12    }
13  ]
14}

Creating/Updating Data

1// POST /api/articles
2{
3  "data": {
4    "title": "New Article",
5    "advancedInput": "new@example.com",
6    "advancedCheckbox": ["1", "3"],
7    "advancedRadio": ["large"]
8  }
9}

🎨 Layout Options

Vertical Layout

Options are stacked vertically for easy scanning.

Horizontal Layout

Options are arranged in a horizontal row for compact forms.

Grid Layout

Options are displayed in a responsive grid for better space utilization.

✅ Validation Features

• Real-time Validation: Immediate feedback during content creation
• Custom Error Messages: Tailored validation messages for better UX
• Required Field Validation: Prevents saving without required data
• Pattern Validation: Regex support for complex validation rules
• Selection Limits: Control minimum and maximum choices
• Unique Value Validation: Ensure data uniqueness across entries

🚀 Performance

• Optimized Rendering: Efficient React components
• Lazy Loading: Components loaded only when needed
• Minimal Bundle Size: Lightweight implementation
• Memory Efficient: Optimized for large datasets

🔒 Security

• Input Sanitization: Automatic data sanitization
• XSS Protection: Built-in security measures
• Private Fields: Hide sensitive data from API responses
• Validation: Server-side validation for data integrity

🤝 Contributing

We welcome contributions! Please see our Contributing Guidelines for details.

Development Setup

# Clone the repository
git clone https://github.com/webbycrown/strapi-advanced-fields.git

# Install dependencies
npm install

# Start development
npm run develop

📝 License

This project is licensed under the MIT License - see the LICENSE file for details.

🆘 Support

• Documentation: GitHub Wiki
• Issues: GitHub Issues
• Discussions: GitHub Discussions
• Email: info@webbycrown.com

🙏 Acknowledgments

• Built for the amazing Strapi community
• Inspired by modern form design principles
• Thanks to all contributors and users

📊 Changelog

v1.0.0

• ✨ Initial release
• 🔤 Advanced Input field with validation
• ☑️ Advanced Checkbox (single/multiple)
• 🔘 Advanced Radio (single/multiple)
• 🎨 Multiple layout options
• ✅ Comprehensive validation system
• 📝 Field notes support for all field types
• 📱 Responsive design
• 🌐 Internationalization support
• 🚀 Published to NPM: @webbycrown/advanced-fields