v1.0.8

Float Input

Experimental

This component is considered experimental. Reach out to the Spark team to find out more about what this means.

Open in Storybook Edit this page

Installation

Install yarn add @spark-web/float-input

npm @spark-web/float-input

Source GitHub.com

Bundle unpkg.com

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.

Example controlled

The current value is: 1000000.101

Open in Playroom

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

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.

Example controlled validation

Please provide a valid float input

The current value is: Hi there

The value type is: string

Open in Playroom

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

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.

Example uncontrolled

The input value is:

Open in Playroom

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

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.

Example format fraction digits

The current value is: 10000.101

Open in Playroom

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

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

Example format fraction digits

The current value is: 10000.101

Open in Playroom

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

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

Prop	Type	Description
children?	AdornmentsAsChildren: ReactElement<InputAdornmentProps, string \| JSXElementConstructor<any>> \| [ReactElement<InputAdornmentProps, string \| JSXElementConstructor<any>>, ReactElement<InputAdornmentProps, string \| JSXElementConstructor<...>>]	Adorn the input with ornamental element(s) to aid user input, or interactive element(s) to augment user input. Each child must be wrapped with the `InputAdornment` component to ensure proper layout, otherwise it will not be rendered.
data?	DataAttributeMap	Sets data attributes for the element.
fractionDigits?	number	Specifies to what fraction digit will be displayed in the component.
onChange?	(value: string \| number) => void
value?	string \| number

Additional props also include TextInput props which are not listed here.