@spark-web/float-input NPM

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. See 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.

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.

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.

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.

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, you can also add adornments to the FloatInput component (at the start or end).

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>
);