Skip to main content

Number Input

The <InputNumber/> component is similar to the Input component, but it has controls for incrementing or decrementing numeric values.

Source@matro-ui/inputnumber

Import​

import { InputNumber, InputNumberField } from "matro-ui";
  • InputNumber: The wrapper that provides context and logic to the components.
  • InputNumberField: The input field itself.

Usage​

Loading...
Live Editor
 <InputNumber>
   <InputNumberField/>
 </InputNumber>

Stepper​

Loading...
Live Editor
// import { 
// InputNumberStepper, 
// InputIncrementStepper, 
// InputDecrementStepper } from "matro-ui";

 <InputNumber>
   <InputNumberField/>

     <InputNumberStepper>
       <InputIncrementStepper />
       <InputDecrementStepper />
     </InputNumberStepper>
 </InputNumber>

Disabled Input​

Loading...
Live Editor
 <InputNumber disabled>
   <InputNumberField/>
 </InputNumber>

Combination of blocks​

Combine <InputNumber/>, <InputText/>, <InputChildSelect/>, <InputChildPrefix/> as you prefer to create any kind of input:

Loading...
Live Editor
<Stack column>
 <LabelText>Example of currency-num</LabelText>
 <InputNumber placeholder="0.00">
   <InputChildPrefix value="$"/>
   <InputNumberField/>
   <InputChildSelect name="select-name-prop" defaultValue="pln">
     <option value="eur">EUR</option>
     <option value="usd">USD</option>
     <option value="pln">PLN</option>
   </InputChildSelect>
 </InputNumber>
</Stack>
Loading...
Live Editor
function Search () {
 const [value, setValue] = React.useState("")
 const handleChange = (e) => {
   setValue(e.target.value);
 } 
 return(
<Stack column>
   <LabelText>Example of search</LabelText>
   <InputText placeholder="Search..." value={value} onChange={handleChange}>
     <InputTextField/>
     <InputChildButton
       children={<IoSearch />} 
       onClick={() => {alert("Query: " + value); setValue("");}}/>
   </InputText>
</Stack>
 );
}
Loading...
Live Editor
  <label>
    <LabelText>Example of link-text</LabelText>
    <InputText
      color="cyangreen"
      placeholder="example.com"
      name="input-name-prop"
    >
      <InputChildPrefix value="https://"/>
      <InputTextField/>
      <InputChildSelect/>
    </InputText>
  </label>