UNPKG

@spark-web/float-input

Version:

--- title: Float Input storybookPath: forms-float-input--default isExperimentalPackage: true ---

141 lines (110 loc) 3.61 kB
--- 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