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