StellarUI

<stellar-number-field>

Properties

Preview

Readonly blocks typing and hides the built-in steppers in this StellarUI port.

Markup

Copy

<stellar-number-field
  tone="primary"
  label="Lives"
  description="How many lives does the cat have left?"
  value="9"
  min="0"
  max="20"
  step="1"
  name="lives"
>
</stellar-number-field>

API

Complete props, events, slots, and implementation notes for the shipped number field.

Props

Prop	Type	Default
`tone`	`neutral \| primary \| secondary \| tertiary \| error`	`neutral`
`appearance`	`default \| ghost`	`default`
`size`	`xs \| sm \| md \| lg \| xl`	`md`
`label`	`string`	`''`
`description`	`string`	`''`
`error`	`string`	`''`
`value`	`string`	`0`
`placeholder`	`string`	`''`
`name`	`string`	`''`
`min`	`string`	`''`
`max`	`string`	`''`
`step`	`string`	`''`
`disabled`	`boolean`	`false`
`readonly`	`boolean`	`false`
`without-steppers`	`boolean`	`false`

Events

Event	Source	Notes
`input`	host	Redispatched from the native input and from stepper button presses.
`change`	host	Redispatched when the native input commits or a stepper changes the value.

Slots

Slot	Notes
`label`	Optional content above the control. Overrides the `label` prop when present.
`description`	Optional helper content below the control. Overrides the `description` prop when present.
`error`	Optional validation message below the control. It replaces `description` while the inner control is invalid.
`start`	Optional leading content inside the field shell.
`end`	Optional trailing content inside the field shell.

Notes

The public tag is `stellar-number-field`, shipped as a dedicated number-field control instead of another `stellar-text-field type="number"` variation.
It keeps a real native `<input type="number">` inside, hides the browser spinners, and adds built-in decrement/increment buttons like the shipped number field.
`withoutSteppers` removes the built-in steppers, and `readonly` now does the same while still forwarding readonly to the inner native input.
`required`, `name`, `min`, `max`, `step`, and `readonly` forward to the inner native number input.
`required`, `aria-invalid`, and `custom-validity` forward to the inner native number input for validation-sensitive flows.
The host exposes `setCustomValidity()`, `checkValidity()`, `reportValidity()`, `validity`, `validationMessage`, and `willValidate`, so app code can use native-like validity APIs on the custom element.
For Datastar, prefer `data-attr:custom-validity="..."` on the custom element host instead of the Pro-only `data-custom-validity` attribute.
`label` and `description` stay aligned with the rest of the StellarUI field-control family, and the host redispatches `input` and `change`.