Professional custom fields for Strapi: Advanced Input with validation, Advanced Checkbox (single/multiple), and Advanced Radio (single/multiple) with dynamic options and comprehensive configuration
npm install @webbycrown/advanced-fields


Professional custom fields for Strapi CMS that provide advanced functionality with comprehensive validation, dynamic options, and user-friendly interfaces.
š¦ NPM Package: @webbycrown/advanced-fields
A short introduction and quick overview of Advanced Fields for Strapi, showcasing available field types, configuration options, and real-world usage inside the Strapi admin panel.

ā¶ļø Watch Full Video on YouTube
---
bash
npm install @webbycrown/advanced-fields
`$3
`bash
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
$3
`javascript
// Example: Text validation with custom error message and field note
{
"required": true,
"maxLength": 255,
"minLength": 3,
"regex": "^[a-zA-Z0-9\\s]+$",
"options": {
"customErrorMessage": "Please enter valid text",
"placeholder": "Enter your text here",
"defaultValue": "Default text",
"fieldNote": "This field accepts alphanumeric characters and spaces only"
}
}
`$3
`javascript
// Example: Multiple checkbox with validation and field note
{
"required": true,
"options": {
"checkboxType": "multiple",
"checkboxOptions": "1|Option 1\n2|Option 2\n3|Option 3",
"minChoices": 1,
"maxChoices": 2,
"layout": "vertical",
"defaultSelected": "1\n2",
"fieldNote": "Please select at least 1 and at most 2 options"
}
}
`$3
`javascript
// Example: Single radio with dynamic options and field note
{
"required": true,
"options": {
"selectionType": "single",
"radioOptions": "small|Small\nmedium|Medium\nlarge|Large",
"layout": "horizontal",
"defaultSelected": "medium",
"fieldNote": "Choose the size that best fits your needs"
}
}
`šÆ Field Options Reference
$3
| Option | Type | Description | Default |
|--------|------|-------------|---------|
|
required | boolean | Field is required | false |
| unique | boolean | Values must be unique | false |
| maxLength | number | Maximum character length | 0 (unlimited) |
| minLength | number | Minimum character length | 0 |
| regex | string | Validation pattern | "" |
| options.defaultValue | string | Pre-filled value | "" |
| options.placeholder | string | Placeholder text | "" |
| options.customErrorMessage | string | Custom error message | "" |
| options.fieldNote | string | Helpful note displayed below field | "" |
| private | boolean | Hide from API | false |$3
| Option | Type | Description | Default |
|--------|------|-------------|---------|
|
required | boolean | Field is required | false |
| options.checkboxType | string | single or multiple | single |
| options.checkboxOptions | string | Options in value\|label format | "" |
| options.defaultSelected | string | Pre-selected options | "" |
| options.minChoices | number | Minimum selections | 0 |
| options.maxChoices | number | Maximum selections | 0 |
| options.layout | string | vertical, horizontal, or grid | vertical |
| options.customErrorMessage | string | Custom error message | "" |
| options.fieldNote | string | Helpful note displayed below field | "" |
| private | boolean | Hide from API | false |$3
| Option | Type | Description | Default |
|--------|------|-------------|---------|
|
required | boolean | Field is required | false |
| options.selectionType | string | single or multiple | single |
| options.radioOptions | string | Options in value\|label format | "" |
| options.defaultSelected | string | Pre-selected options | "" |
| options.minChoices | number | Minimum selections | 0 |
| options.maxChoices | number | Maximum selections | 0 |
| options.layout | string | vertical, horizontal, or grid | vertical |
| options.customErrorMessage | string | Custom error message | "" |
| options.fieldNote | string | Helpful note displayed below field | "" |
| private | boolean | Hide from API | false |š§ API Usage
$3
`javascript
// GET /api/articles
{
"data": [
{
"id": 1,
"attributes": {
"title": "Sample Article",
"advancedInput": "user@example.com",
"advancedCheckbox": ["1", "2"],
"advancedRadio": ["medium"]
}
}
]
}
`$3
`javascript
// POST /api/articles
{
"data": {
"title": "New Article",
"advancedInput": "new@example.com",
"advancedCheckbox": ["1", "3"],
"advancedRadio": ["large"]
}
}
`šØ Layout Options
$3
Options are stacked vertically for easy scanning.$3
Options are arranged in a horizontal row for compact forms.$3
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.
$3
`bash
Clone the repository
git clone https://github.com/webbycrown/strapi-advanced-fields.gitInstall dependencies
npm installStart development
npm run develop
``This project is licensed under the MIT License - see the LICENSE file for details.
- Documentation: GitHub Wiki
- Issues: GitHub Issues
- Discussions: GitHub Discussions
- Email: info@webbycrown.com
- Built for the amazing Strapi community
- Inspired by modern form design principles
- Thanks to all contributors and users
---