Components / Forms / NumberInput — Carla Design System

Main navigation
Intro
OverviewGetting StartedConfiguration
Design Language
ValuesPrinciplesColorsTypographyIconsIllustrations
Guides
StylingThemingLayoutForms
Components
Core
ClickElIconButtonLabelText
Layout
BoxGridSpacer
Actions
ActionButtonActionLinkFloatingActionButton
Forms
CheckboxCheckboxCardFileInputNumberInputRadioRadioCardRadioGroupSelectInputSliderSmallCardSortingSelectorTextAreaTextInput
Disclosure
AccordionCarouselModalOverlayVisuallyHidden
Data Display
BadgeCardInfoMessageTag
Feedback
LoadingLoadingBar
Media
LogoIconsIllustrations
Formatting
CurrencyDateTimeDistance
Hooks
useBreakpointuseFielduseFormuseScrollBlockingOverlayuseStorageuseClickAway
Utilities
formatCurrencyformatDateTimeformatDistance
Components / Forms / NumberInput
NumberInputA counter-like input component for numbers.

It lacks many of the features of normal inputs and has no invalid state or error message.
PropsName
Type
Default
Description
onChange*
func
The change event handler.
description
string
Additional description information display beneath the input.
label
string
The label text.
max
number
min
number
value
string, number
ExamplesDefault
Dark Mode
function Example() {
  const age = useField({ name: 'age' })

  return <NumberInput label="Age" {...age.props} />
}function Example() {
  const age = useField({ name: 'age' })

  return <NumberInput label="Age" {...age.props} />
}
Description
Dark Mode
Open in Playroom
<NumberInput
  label="Age"
  value={8}
  onChange={() => null}
  description="You must be over 18."
/><NumberInput
  label="Age"
  value={8}
  onChange={() => null}
  description="You must be over 18."
/>
DisabledNot yet implemented.
Min & Max
Dark Mode
function Example() {
  const tires = useField({ name: 'tires' })

  return <NumberInput label="Tires" min={0} max={4} {...tires.props} />
}function Example() {
  const tires = useField({ name: 'tires' })

  return <NumberInput label="Tires" min={0} max={4} {...tires.props} />
}
Table of Contents
Props
Examples
Default
Description
Disabled
Min & Max

Name	Type	Description
onChange*	func	The change event handler.
description	string	Additional description information display beneath the input.
label	string	The label text.
max	number
min	number
value	string, number