woi-react-components
Version:
This project requires NodeJS (version 18 or later) and NPM. [Node](http://nodejs.org/) and [NPM](https://npmjs.org/) are really easy to install. To make sure you have them available on your machine, try running the following command. ```sh $ npm -v &
87 lines (79 loc) • 3.43 kB
Markdown
## WOI TextField
WOI TextField component accepts the following props:
| Props | Type |
| ---------------------------- | -------- |
| type | String |
| label | String |
| labelFontSize | Number |
| labelFontWeight | String |
| labelFontFamily | String |
| labelFontDecoration | String |
| labelColor | String |
| placeholder | String |
| placeholderFontSize | Number |
| placeholderFontWeight | String |
| placeholderFontFamily | String |
| placeholderFontDecoration | String |
| placeholderColor | String |
| supportingText | String |
| supportingTextFontSize | Number |
| supportingTextFontWeight | String |
| supportingTextFontFamily | String |
| supportingTextFontDecoration | String |
| supportingTextColor | String |
| leftIcon | String |
| leftIconSize | Number |
| leftIconColor | String |
| rightIcon | String |
| rightIconSize | Number |
| rightIconColor | String |
| fontSize | Number |
| fontWeight | String |
| fontFamily | String |
| fontDecoration | String |
| color | String |
| backgroundColor | String |
| backgroundOpacity | String |
| borderColor | String |
| borderWidth | Number |
| borderRadius | Number |
| borderType | String |
| boxShadow | String |
| multline | String |
| onComplete | Function |
| isDisabled | Boolean |
### **TextField Usage**
```js
import {WOITextField} from "woi-react-storybook/components";
const WOITextFieldWidget = () => {
<WOITextField
type ="text"
label="Label text"
labelColor= "#000000"
placeholder= "Placeholder here..."
placeholderColor= "#00000050"
supportingText= 'Supporting text'
supportingTextColor= '#000000'
borderColor= '#007EDA'
backgroundColor= '#F3F7FD'
backgroundOpacity= '1'
borderRadius= {6}
borderWidth= {1}
fontSize={16}
borderType= 'solid'
boxShadow= 'none'
leftIcon='<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,3L2,12H5V20H19V12H22L12,3M12,8.75A2.25,2.25 0 0,1 14.25,11A2.25,2.25 0 0,1 12,13.25A2.25,2.25 0 0,1 9.75,11A2.25,2.25 0 0,1 12,8.75M12,15C13.5,15 16.5,15.75 16.5,17.25V18H7.5V17.25C7.5,15.75 10.5,15 12,15Z" />
</svg>'
leftIconSize={24}
leftIconColor='#000000'
rightIcon= '<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24">
<path d="M12,19.2C9.5,19.2 7.29,17.92 6,16C6.03,14 10,12.9 12,12.9C14,12.9 17.97,14 18,16C16.71,17.92 14.5,19.2 12,19.2M12,5A3,3 0 0,1 15,8A3,3 0 0,1 12,11A3,3 0 0,1 9,8A3,3 0 0,1 12,5M12,2A10,10 0 0,0 2,12A10,10 0 0,0 12,22A10,10 0 0,0 22,12C22,6.47 17.5,2 12,2Z" />
</svg>'
rightIconSize= {24}
rightIconColor='#000000'
isDisabled={false}
multline={0}
/>;
};
```