Demos
Empty
<Field.Number onChange={(value) => console.log('onChange', value)} />
Placeholder
<Field.Numberplaceholder="Enter a number"onChange={(value) => console.log('onChange', value)}/>
Label
<Field.Numberlabel="Label text"onChange={(value) => console.log('onChange', value)}/>
Label and value
<Field.Numbervalue={420000.25}label="Label text"onChange={(value) => console.log('onChange', value)}/>
Horizontal layout
<Field.Numbervalue={420000}label="Label text"layout="horizontal"onChange={(value) => console.log('onChange', value)}/>
Widths
<Field.Numberlabel="Default width (property omitted)"value={123}onChange={(value) => console.log('onChange', value)}/><Field.Numberlabel="False (for browser default)"value={123}width={false}onChange={(value) => console.log('onChange', value)}/><Field.Numberlabel="Medium"value={123}width="medium"onChange={(value) => console.log('onChange', value)}/><Field.Numberlabel="Large"value={123}width="large"onChange={(value) => console.log('onChange', value)}/><Field.Numberlabel="Stretch"value={123}width="stretch"onChange={(value) => console.log('onChange', value)}/>
Disabled
<Field.Numbervalue={135}label="Label text"onChange={(value) => console.log('onChange', value)}disabled/>
Info
Useful information (?)
<Field.Numbervalue={135}label="Label text"onChange={(value) => console.log('onChange', value)}info="Useful information (?)"/>
Warning
I'm warning you...
<Field.Numbervalue={135}label="Label text"onChange={(value) => console.log('onChange', value)}warning={new FormError("I'm warning you...")}/>
Error
This is what is wrong...
<Field.Numbervalue={135}label="Label text"onChange={(value) => console.log('onChange', value)}error={new FormError('This is what is wrong...')}/>
Validation - Required
<Field.Numbervalue={123}label="Remove and blur field"onChange={(value) => console.log('onChange', value)}required/>
Validation - Minimum
<Field.Numbervalue={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.Numbervalue={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!",}}/>