---
title: Number field
description: Number fields allow users to enter numeric values with optional min/max constraints.
category: Forms
related: [TextField, Label, Container]
commonPatterns: [form-number-input, quantity-input, price-input]
---

Source: https://clickhouse.design/click-ui/numberField

# Number field

Number fields allow users to enter numeric values with optional min/max constraints. They support step increments, validation, and various states.

## Example

## Props

| Prop        | Type                         | Default value | Description                                                                          |
| ----------- | ---------------------------- | ------------- | ------------------------------------------------------------------------------------ |
| label       | `ReactNode`                  | `""`          | Label text or content displayed above or beside the number field                     |
| placeholder | `string`                     | `""`          | Placeholder text displayed when the field is empty                                   |
| orientation | `"vertical" \| "horizontal"` | `"vertical"`  | Layout orientation - whether label and field are arranged vertically or horizontally |
| min         | `number`                     | `undefined`   | Minimum allowed value for the number input                                           |
| max         | `number`                     | `undefined`   | Maximum allowed value for the number input                                           |
| step        | `number`                     | `1`           | Step increment/decrement value when using up/down arrows                             |
| error       | `boolean`                    | `false`       | Whether the field is in an error state, typically shown with red styling             |
| disabled    | `boolean`                    | `false`       | Whether the field is disabled and cannot be interacted with                          |

```tsx
import { NumberField } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyNumberField() {
const [value, setValue] = useState('')
return (
  <NumberField 
    id="example"
    label="Basic Number Field"
    placeholder="Enter a number"
    onChange={(value, e) => setValue(value)}
  />
)
}
```

## Quick start

```tsx
import { NumberField } from '@clickhouse/click-ui'
import { useState } from 'react'

function MyNumberField() {
const [value, setValue] = useState('')
return (
  <NumberField 
    id="quantity"
    label="Quantity"
    placeholder="Enter quantity"
    onChange={(value, e) => setValue(value)}
    min={0}
    max={100}
  />
)
}
```

## Related components

- **TextField**: For text input, similar API to NumberField.
- **Label**: Provides accessible labels for number fields.
- **Container**: For organizing number fields within forms.

## Common use cases

### Form number input

```tsx
import { NumberField } from '@clickhouse/click-ui'
import { useState } from 'react'

function FormNumberInput() {
const [quantity, setQuantity] = useState('')
return (
  <NumberField
    id="quantity"
    label="Quantity"
    placeholder="Enter quantity"
    onChange={(value, e) => setQuantity(value)}
    min={0}
    max={100}
  />
)
}
```

### Price input

```tsx
import { NumberField } from '@clickhouse/click-ui'
import { useState } from 'react'

function PriceInput() {
const [price, setPrice] = useState('')
return (
  <NumberField
    id="price"
    label="Price"
    placeholder="0.00"
    onChange={(value, e) => setPrice(value)}
    min={0}
    step={0.01}
  />
)
}
```

### With constraints

```tsx
import { NumberField, Container } from '@clickhouse/click-ui'
import { useState } from 'react'

function ConstrainedNumberField() {
const [value, setValue] = useState('')
return (
  <NumberField
    id="number"
    label="With Min/Max"
    placeholder="Enter a number"
    onChange={(value, e) => setValue(value)}
    min={0}
    max={10}
    step={1}
  />
)
}
```

### States