Falcon UI

numberInput

NumberInput renders as <input type="number"> with custom step controls, accepts all the props of native input (onChange, value etc) as well as responsive, theme-based style props for styling customizations.

xxxxxxxxxx
 
import { NumberInput } from '@deity/falcon-ui';

Uncontrolled

Controlled

 
<FlexLayout mb="lg" flexDirection="column" alignItems="flex-start">
  <H4 mb="sm">Uncontrolled</H4>
  <NumberInput defaultValue={4} />
</FlexLayout>
<FlexLayout mb="lg" flexDirection="column" alignItems="flex-start">
  <H4 mb="sm">Controlled</H4>
  <Value initial={5}>
    {({ value, set }) => (
      <NumberInput value={value} onChange={e => set(e.target.value)} />
    )}
  </Value>
</FlexLayout>

Custom NumberInput icons can be provided via icons section of Theme.

 
<ThemeProvider theme={themeWithCustomNumberIcons}>
  <NumberInput defaultValue={4} />
</ThemeProvider>

xxxxxxxxxx
 
const themeWithCustomNumberIcons = createTheme({
  icons: {
    icons: {
      numberInputDown: {
        icon: CustomDownIcon
      },
      numberInputUp: {
        icon: CustomUpIcon
      }
    }
  }
});