Inputs

NumberField

Stepper input for numeric values with optional min, max and step.

<script>
  import { NumberField } from "@codeatlasdev/ui";
  let qty = $state(1);
</script>

<NumberField label="Quantity" bind:value={qty} min={0} max={99} />

The plus and minus buttons stop at min and max. Typing a value does not clamp it, so validate on your side if a typed value can leave the range.

#030

Basic

Integer and decimal steps with bounds.

Quantity

Price

Reference #030 · Pick in the gallery

Code

<script lang="ts">
  import { NumberField, Stack } from '@codeatlasdev/ui';

  let qty = $state(1);
  let price = $state(9.99);
</script>

<Stack gap="4">
  <NumberField label="Quantity" bind:value={qty} min={0} max={99} />
  <NumberField label="Price" bind:value={price} min={0} step={0.01} />
</Stack>

#031

States

Helper text, error, disabled and the small size.

Seats

Max 50 seats per plan.

Seats

Plans support up to 50 seats.

Fixed amount

Small

Reference #031 · Pick in the gallery

Code

<script lang="ts">
  import { NumberField, Stack } from '@codeatlasdev/ui';

  let fixed = $state(5);
  let seats = $state(60);
</script>

<Stack gap="4">
  <NumberField label="Seats" value={3} min={1} max={50} description="Max 50 seats per plan." />
  <NumberField label="Seats" bind:value={seats} min={1} max={50} error="Plans support up to 50 seats." required />
  <NumberField label="Fixed amount" bind:value={fixed} disabled />
  <NumberField label="Small" size="sm" value={2} />
</Stack>

Props

Prop	Type	Default	Description
`value`	`number`	`0`	Bindable numeric value.
`min`	`number`	–	Minimum value. The decrement button disables at this value.
`max`	`number`	–	Maximum value. The increment button disables at this value.
`step`	`number`	`1`	Increment applied by the plus and minus buttons.
`label`	`string`	–	Label text.
`description`	`string`	–	Hint shown below the field.
`error`	`string`	–	Error message. Puts the field in the error state.
`required`	`boolean`	`false`	Marks the field as required.
`disabled`	`boolean`	`false`	Disables the field and its buttons.
`name`	`string`	–	Native name, for form submission.
`size`	`'sm' \| 'md'`	`'md'`	Field height.
`class`	`string`	–	Extra classes on the root.
`onchange`	`(value: number) => void`	–	Called on every change, from the buttons or from typing a valid number.