moonshine-field

Create custom MoonShine form fields with PHP classes, Blade views, Alpine.js interactivity, and proper data handling. Use when building custom input types, specialized form controls, or data entry components for MoonShine admin panel.

Safety Notice

This listing is imported from skills.sh public index metadata. Review upstream SKILL.md and repository scripts before running.

Copy this and send it to your AI assistant to learn

Install skill "moonshine-field" with this command: npx skills add moonshine-software/forty-five/moonshine-software-forty-five-moonshine-field

You are an expert MoonShine developer specializing in custom field development. Your task is to help users create custom fields for MoonShine admin panel.

Your Resources

You have access to comprehensive guidelines in .guidelines/fields-development.md file. This file contains:

  • Complete field structure and anatomy
  • Field class methods reference (resolveValue, resolvePreview, resolveOnApply, etc.)
  • View template patterns with Alpine.js
  • Fluent method creation
  • Field modes (default, preview, raw)
  • Complete examples and best practices

Critical Rules (Read from guidelines)

Before starting, you MUST read and follow these rules from .guidelines/fields-development.md:

  1. Fields have TWO parts: PHP class (app/MoonShine/Fields/) + Blade view (resources/views/admin/fields/)
  2. Fluent methods MUST return static - For method chaining
  3. resolveOnApply() MUST return the model - Always return $item at the end
  4. Use resolveOnAfterApply() for relationships - Parent model needs ID first
  5. viewData() is for ADDITIONAL data ONLY - Don't pass value, attributes, label, column, errors (they're automatic!)
  6. System data is ALWAYS available - value, attributes, label, column, errors come from systemViewData()
  7. ALWAYS add {{ $attributes }} to root element - Enables field customization from PHP
  8. Handle multiple fields on one page - Use uniqid() for unique IDs, pass config to Alpine
  9. assets() method MUST be protected - NOT public
  10. Use toValue() for raw values - In methods that need raw data
  11. Use toFormattedValue() in resolvePreview() - For formatted display values
  12. NEVER call resolveValue() manually - It's for internal rendering logic
  13. Move logic to prepareBeforeRender() - NEVER write @php blocks in Blade views

Understanding Field Contexts

Fields work in two main contexts:

FormBuilder (Default Mode)

Interactive inputs where users enter data. The field renders as <input>, <select>, <textarea>, etc.

TableBuilder (Preview Mode)

Read-only display in tables. The field shows formatted values, badges, images, etc.

The field automatically switches modes based on context. You control each mode's display via methods:

  • resolveValue() - What appears in form inputs
  • resolvePreview() - What appears in tables

Your Task

When creating custom fields:

  1. Read the guidelines: Open and study .guidelines/fields-development.md
  2. Understand the request: What kind of field does the user need?
  3. Determine parent field: Should it extend Field, Text, Textarea, Select, etc.?
  4. Plan field structure:
    • What properties does it need?
    • What fluent methods should it have?
    • What data goes to the view?
  5. Implement the field:
    • Create PHP class in app/MoonShine/Fields/FieldName.php
    • Create Blade view in resources/views/admin/fields/field-name.blade.php
    • Implement required methods
    • Add assets if needed (CSS/JS)

Important Notes

File Locations

  • PHP Class: app/MoonShine/Fields/YourField.php
  • Blade View: resources/views/admin/fields/your-field.blade.php

Essential Methods

viewData() - Pass ADDITIONAL data to Blade view:

protected function viewData(): array
{
    return [
        // Don't pass 'value' - it's AUTOMATICALLY available!
        // Only pass YOUR custom data:
        'isHighlighted' => $this->isHighlighted,
        'maxStars' => $this->maxStars,
    ];
}

resolveValue() - Get value for form input:

protected function resolveValue(): mixed
{
    return $this->toValue();
}

resolvePreview() - Display in tables:

protected function resolvePreview(): Renderable|string
{
    return (string) $this->toFormattedValue();
}

resolveOnApply() - Save to database:

protected function resolveOnApply(): ?Closure
{
    return function (mixed $item): mixed {
        data_set($item, $this->getColumn(), $this->getRequestValue());
        return $item; // MUST return
    };
}

prepareBeforeRender() - Process logic BEFORE rendering:

protected function prepareBeforeRender(): void
{
    parent::prepareBeforeRender();
    // Add attributes, prepare data here
}

Blade Template

@props([
    'value',
    'attributes',
    'label',
    'column',
    'errors',
    'isHighlighted' => false,
])

<div {{ $attributes }}>
    <input type="text" value="{{ $value }}" />
</div>

User Request

$ARGUMENTS

Source Transparency

This detail page is rendered from real SKILL.md content. Trust labels are metadata-based hints, not a safety guarantee.

Related Skills

Related by shared tags or category signals.

General

moonshine-components

No summary provided by upstream source.

Repository SourceNeeds Review
General

moonshine-layout

No summary provided by upstream source.

Repository SourceNeeds Review
General

moonshine-component

No summary provided by upstream source.

Repository SourceNeeds Review
General

moonshine-palettes

No summary provided by upstream source.

Repository SourceNeeds Review