NumberField

A numeric input with label, description, icon, and validation support.

Label

Usage#

import { NumberField } from '@backstage/ui';

<NumberField label="Minutes" minValue={0} maxValue={59} step={1} />

API reference#

Prop	Type	Default	Description
size	smallmedium	small	Visual size of the input. Use small for dense layouts, medium for prominent fields.
label	string	-	Visible label displayed above the input.
secondaryLabel	string	-	Secondary text shown next to the label. If not provided and isRequired is true, displays Required.
description	string	-	Help text displayed below the label.
icon	ReactNode	-	Icon rendered before the input.
placeholder	string	-	Text displayed when the input is empty.
name	string	-	Form field name for submission.
minValue	number	-	Minimum allowed value.
maxValue	number	-	Maximum allowed value.
step	number	-	Step increment for arrow key changes.
formatOptions	Intl.NumberFormatOptions	-	Number formatting options. Defaults to useGrouping: false.
isRequired	boolean	-	Whether the field is required for form submission.
isDisabled	boolean	-	Whether the input is disabled.
isReadOnly	boolean	-	Whether the input is read-only.
value	number	-	Controlled value of the input.
defaultValue	number	-	Default value for uncontrolled usage.
onChange	(value: number) => void	-	Handler called when the input value changes.
className	string	-	Additional CSS class name for custom styling.
style	CSSProperties	-	Inline CSS styles object.

Inherits all React Aria NumberField props.

Examples#

Sizes#

<Flex direction="column" gap="4">
  <NumberField
    size="small"
    name="quantity"
    placeholder="Enter a number"
    icon={<RiTimeLine />}
  />
  <NumberField
    size="medium"
    name="quantity"
    placeholder="Enter a number"
    icon={<RiTimeLine />}
  />
</Flex>

With description#

<NumberField
  name="quantity"
  placeholder="Enter a number"
  label="Label"
  description="Description"
/>

Label

Description

Theming#

Our theming system is based on a mix between CSS classes, CSS variables and data attributes. If you want to customise this component, you can use one of these class names below.

bui-NumberField
bui-InputWrapper
bui-Input
bui-InputIcon
bui-StepperButtons
bui-StepperButton