Number input

The number input collects a numeric value. Create one with NumberInput::make().

PHP

NumberInput::make('age', 'Age')
  ->min(0)
  ->max(120)

Preview

Tree

• ▾field.number-input
  • autoFocus:false
  • columnWidth:"md"
  • conditions:null
  • dependsOnAny:false
  • dependsOnKeys:null
  • disabled:false
  • editablePrefill:false
  • helperText:null
  • hidden:false
  • label:"Age"
  • max:120
  • min:0
  • name:"age"
  • placeholder:null
  • prefillRefreshOn:null
  • prefillResetOn:null
  • prefix:null
  • readOnly:false
  • required:false
  • slider:false
  • step:null
  • suffix:null
  • tabIndex:null
  • tooltip:null
  • value:null

Style

Min, max, and step

->min() and ->max() bound the value; ->step() sets the increment used by the spinner controls and accepts decimals for fractional values such as prices. These constrain the browser control; add matching validation rules to enforce them on the server.

NumberInput::make('unit_price', 'Unit price')
    ->min(0)
    ->step(0.01)
    ->rules(['numeric', 'min:0']);

Slider

->slider() renders the field as a range slider instead of a spinner. Pair it with ->min() and ->max() so the track has defined bounds.

PHP

NumberInput::make('satisfaction', 'Satisfaction')
  ->slider()
  ->min(0)
  ->max(10)

Preview

Tree

• ▾field.number-input
  • autoFocus:false
  • columnWidth:"md"
  • conditions:null
  • dependsOnAny:false
  • dependsOnKeys:null
  • disabled:false
  • editablePrefill:false
  • helperText:null
  • hidden:false
  • label:"Satisfaction"
  • max:10
  • min:0
  • name:"satisfaction"
  • placeholder:null
  • prefillRefreshOn:null
  • prefillResetOn:null
  • prefix:null
  • readOnly:false
  • required:false
  • slider:true
  • step:null
  • suffix:null
  • tabIndex:null
  • tooltip:null
  • value:null

Style

Affixes

->prefix() and ->suffix() add a currency symbol, unit, or icon to the input. See affixes on Text input for the full rules. Affixes apply to the spinner variant only — they are not rendered in slider mode.

NumberInput::make('price', 'Price')->prefix('$')->suffix('USD');

Common options

NumberInput shares label, default value, required, disabled, read-only, and visibility options with every field — see Fields. For validation and conditional behavior, see Validation and Conditional fields.