Numeric Field

Components

Numeric Field

A numeric field component for use inside a form, used for number input

About

The NumericField is built using a composition of the <TextField /> component.

Usage

'use client';
 
import * as React from 'react';
 
import { NumericField } from '@/components/ui/formfield';
 
export function NumericFieldDemo() {
  const [age, setAge] = React.useState(20);
  return (
    <form>
      <NumericField name="price" label="Amount" defaultValue={0} />
      <NumericField name="age" label="Age" value={age} onChange={(e) => setAge(e.target.value)} min={1} max={111} />
    </form>
  );
}

'use client';
 
import * as React from 'react';
 
import { NumericField } from '@/components/ui/formfield';
 
export function NumericFieldDemo() {
  const [age, setAge] = React.useState(20);
  return (
    <form>
      <NumericField name="price" label="Amount" defaultValue={0} />
      <NumericField name="age" label="Age" value={age} onChange={(e) => setAge(e.target.value)} min={1} max={111} />
    </form>
  );
}

API Reference

Prop	Type	Default
name*	string
id	string
label	string
placeholder	string
required	boolean
readOnly	boolean
error	string
min	number
max	number
roundTo	number
value	any
onChange	event
onBlur	event