Skip to main content

Text Input

The <InputText/> component allows to get user input in a text field.

Source@matro-ui/inputtext

Import​

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

Usage​

Loading...
Live Editor
 <InputText placeholder="Start typing...">
   <InputTextField/>
 </InputText>

Disabled Input​

Loading...
Live Editor
 <InputText disabled placeholder="Disabled">
   <InputTextField/>
 </InputText>

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/>
    
    </InputText>
  </label>