@spark-web/float-input
Version:
--- title: Float Input storybookPath: forms-float-input--default isExperimentalPackage: true ---
141 lines (110 loc) • 3.61 kB
Markdown
---
title: Float Input
storybookPath: forms-float-input--default
isExperimentalPackage: true
---
Float input provides a way for inputting float values.
## Usage
### Field
The component must be nested within a [`Field`](/package/field). See
[`Field`](/package/field) for more details.
## Examples
### Controlled
A `FloatInput` can be either controlled or uncontrolled. To control a
`FloatInput` 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 (
<Stack gap="large">
<Field label="Example controlled">
<FloatInput value={value} onChange={v => setValue(v)} />
</Field>
<Text>The current value is: {value}</Text>
</Stack>
);
```
#### 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 (
<Stack gap="large">
<Field
label="Example controlled validation"
tone={isInvalid && 'critical'}
message={isInvalid && 'Please provide a valid float input'}
>
<FloatInput value={value} onChange={v => setValue(v)} />
</Field>
<Text>The current value is: {value}</Text>
<Text>The value type is: {typeof value}</Text>
</Stack>
);
```
### Uncontrolled
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 (
<Stack gap="large">
<Field label="Example uncontrolled">
<FloatInput ref={inputRef} />
</Field>
<Button onClick={showValueHandler}>Show input value</Button>
<Text>The input value is: {value}</Text>
</Stack>
);
```
### Format fraction digits
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 (
<Stack gap="large">
<Field label="Example format fraction digits">
<FloatInput
fractionDigits={2}
value={value}
onChange={v => setValue(v)}
/>
</Field>
<Text>The current value is: {value}</Text>
</Stack>
);
```
### Input Adornments
Similar to [TextInput](/package/text-input/), you can also add adornments to the
`FloatInput` component (at the start or end).
```jsx live
const [value, setValue] = React.useState(10000.101);
return (
<Stack gap="large">
<Field label="Example format fraction digits">
<FloatInput fractionDigits={2} value={value} onChange={v => setValue(v)}>
<InputAdornment placement="end">
<Text>kW</Text>
</InputAdornment>
</FloatInput>
</Field>
<Text>The current value is: {value}</Text>
</Stack>
);
```
## Props
<PropsTable displayName="FloatInput" />
Additional props also include [`TextInput`](/package/text-input) props which are
not listed here.
[adornment-children]:
https://github.com/brighte-labs/spark-web/blob/d4da46200f2d6e5e9291d3c650eaaff7e53f411b/packages/text-input/src/childrenToAdornments.tsx#L12