Fields

Number

Basics

Contains all Basic Methods.

The Number field is a basic numeric input field in MoonShine. This field is equivalent to <input type="number">.

use MoonShine\UI\Fields\Number;
 
Number::make('Sort')
use MoonShine\UI\Fields\Number;
 
Number::make('Sort')
<x-moonshine::field-container label="Sort">
    <x-moonshine::form.input
        type="number"
        name="sort"
    />
</x-moonshine::field-container>
<x-moonshine::field-container label="Sort">
    <x-moonshine::form.input
        type="number"
        name="sort"
    />
</x-moonshine::field-container>

Basic Methods

Default Value

You can use the default() method if you need to specify a default value for the field.

default(mixed $default)
default(mixed $default)
use MoonShine\UI\Fields\Number;
 
Number::make('Title')
    ->default(2)
use MoonShine\UI\Fields\Number;
 
Number::make('Title')
    ->default(2)

Placeholder

The placeholder() method allows you to set the placeholder attribute for the field.

placeholder(string $value)
placeholder(string $value)
use MoonShine\UI\Fields\Number;
 
Number::make('Rating', 'rating')
    ->nullable()
    ->placeholder('Product Rating')
use MoonShine\UI\Fields\Number;
 
Number::make('Rating', 'rating')
    ->nullable()
    ->placeholder('Product Rating')

Buttons +/-

The buttons() method allows you to add buttons to the field for increasing or decreasing the value.

buttons()
buttons()
use MoonShine\UI\Fields\Number;
 
Number::make('Rating')
    ->buttons()
use MoonShine\UI\Fields\Number;
 
Number::make('Rating')
    ->buttons()

number_buttons

Methods for Working with Numerical Values

Max and Min Value

The min() and max() methods are used to set the minimum and maximum values for the field.

min(int|float $min)
min(int|float $min)
max(int|float $max)
max(int|float $max)

Step

The step() method is used to specify the step value for the field.

step(int|float $step)
step(int|float $step)
use MoonShine\UI\Fields\Number;
 
Number::make('Price')
    ->min(0)
    ->max(100000)
    ->step(5)
use MoonShine\UI\Fields\Number;
 
Number::make('Price')
    ->min(0)
    ->max(100000)
    ->step(5)

Stars

The stars() method is used to display the numerical value in the preview mode as stars (e.g., for ratings).

stars()
stars()
use MoonShine\UI\Fields\Number;
 
Number::make('Rating')
    ->stars()
    ->min(1)
    ->max(10)
use MoonShine\UI\Fields\Number;
 
Number::make('Rating')
    ->stars()
    ->min(1)
    ->max(10)

Extensions

Fields support various extensions for assistance and input control.

expansion expansion_dark

Copy

The copy() method adds a button to copy the field's value.

copy(string $value = '{{value}}')
copy(string $value = '{{value}}')

Example usage:

Number::make('Price')
    ->copy()
Number::make('Price')
    ->copy()

Hide Value

The eye() method adds a button to show/hide the field's value (e.g., for passwords).

eye()
eye()

Example usage:

Number::make('Password', 'password')
    ->eye()
Number::make('Password', 'password')
    ->eye()

Lock

The locked() method adds a lock icon to the field.

locked()
locked()

Example usage:

Number::make('Protected Field', 'protected_field')
    ->locked()
Number::make('Protected Field', 'protected_field')
    ->locked()

Suffix

The suffix() method adds a suffix to the input field.

suffix(string $ext)
suffix(string $ext)

Preview Edit

This field supports preview editing.