--- title: Float Input storybookPath: forms-float-input--default isExperimentalPackage: true ---
---
title: Float Input
storybookPath: forms-float-input--default
isExperimentalPackage: true
---
Float input provides a way for inputting float values.
The component must be nested within a Field. SeeField for more details.
A FloatInput can be either controlled or uncontrolled. To control aFloatInput provide a value, as well as an onChange function to set the new
value when the select is updated.
``jsx live
const [value, setValue] = React.useState(1000000.101);
return (
);
`
#### Validation
The provided controlled value can be of type string or number. Valid numbers are
represented as numbers and everything else as a string. This allows for easy
passing of floats to other system, whilst also giving a way to check for invalid
string values and provide an appropriate validation error.
`jsx live
const [value, setValue] = React.useState('Hi there');
const isInvalid = typeof value === 'string';
return (
tone={isInvalid && 'critical'}
message={isInvalid && 'Please provide a valid float input'}
>
);
`
A FloatInput can also be uncontrolled, managing it's own internal state. To
access the value, instead of writing an onChange handler, you would use a ref to
get form values from the DOM.
`jsx live
const inputRef = React.useRef(null);
const [value, setValue] = React.useState('');
const showValueHandler = React.useCallback(() => {
setValue(inputRef.current?.value);
}, [setValue]);
return (
);
`
You can also set to what fraction digit you want the displayed value in the
FloatInput to be.
`jsx live
const [value, setValue] = React.useState(10000.101);
return (
value={value}
onChange={v => setValue(v)}
/>
);
`
Similar to TextInput, you can also add adornments to the
FloatInput component (at the start or end).
`jsx live
const [value, setValue] = React.useState(10000.101);
return (
);
`
Additional props also include TextInput` props which are
not listed here.
[adornment-children]:
https://github.com/brighte-labs/spark-web/blob/d4da46200f2d6e5e9291d3c650eaaff7e53f411b/packages/text-input/src/childrenToAdornments.tsx#L12