Skip to content

Demos

Empty

<Field.Number onChange={(value) => console.log('onChange', value)} />

Placeholder

<Field.Number
placeholder="Enter a number"
onChange={(value) => console.log('onChange', value)}
/>

Label

<Field.Number
label="Label text"
onChange={(value) => console.log('onChange', value)}
/>

Label and value

<Field.Number
value={420000.25}
label="Label text"
onChange={(value) => console.log('onChange', value)}
/>

Horizontal layout

<Field.Number
value={420000}
label="Label text"
layout="horizontal"
onChange={(value) => console.log('onChange', value)}
/>

Widths

<Field.Number
label="Default width (property omitted)"
value={123}
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
label="Medium"
value={123}
width="medium"
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
label="Large"
value={123}
width="large"
onChange={(value) => console.log('onChange', value)}
/>
<Field.Number
label="Stretch"
value={123}
width="stretch"
onChange={(value) => console.log('onChange', value)}
/>

Disabled

<Field.Number
value={135}
label="Label text"
onChange={(value) => console.log('onChange', value)}
disabled
/>

Info

Useful information (?)
<Field.Number
value={135}
label="Label text"
onChange={(value) => console.log('onChange', value)}
info="Useful information (?)"
/>

Warning

I'm warning you...
<Field.Number
value={135}
label="Label text"
onChange={(value) => console.log('onChange', value)}
warning={new FormError("I'm warning you...")}
/>

Error

This is what is wrong...
<Field.Number
value={135}
label="Label text"
onChange={(value) => console.log('onChange', value)}
error={new FormError('This is what is wrong...')}
/>

Validation - Required

<Field.Number
value={123}
label="Remove and blur field"
onChange={(value) => console.log('onChange', value)}
required
/>

Validation - Minimum

<Field.Number
value={300}
label="Enter a number below 250 and blur to trigger error"
onChange={(value) => console.log('onChange', value)}
minimum={250}
/>

Validation - Maximum and custom error message

<Field.Number
value={200}
label="Enter a number above 250 and blur to trigger error"
onChange={(value) => console.log('onChange', value)}
maximum={250}
errorMessages={{
maximum: "You can't enter a number THAR large.. Max 250!",
}}
/>