hawk-ui: Basic Input Component
npm install @hawk-ui/input
#### To install a component run$ npm install @hawk-ui/input --save
#### Please import CSS styles via
``scss noeditor`
@import '/path__to__node_modules/@hawk-ui/input/dist/index.min.css
#### Without Label and Without Required:
Demo
`js static`
import Input from '@hawk-ui/input';`js
initialState = {
value: '',
};
type="text"
value={state.value}
onChange={(event) => {
setState({
value: event.target.value,
});
}}
onEnter={(value) => {
alert(value);
}}
placeholder="Enter Username"
description="This is user input"
/>
`
#### With Copy
Demo
`js static`
import Input from '@hawk-ui/input';`js
initialState = {
value: '',
};
type="text"
value={state.value}
id="copy"
isCopyable
onChange={(event) => {
setState({
value: event.target.value,
});
}}
onEnter={(value) => {
alert(value);
}}
placeholder="Enter Username"
/>
`
#### With Password Visible
Demo
`js static`
import Input from '@hawk-ui/input';`js
initialState = {
value: '',
};
type="password"
value={state.value}
isPasswordVisible
onChange={(event) => {
setState({
value: event.target.value,
});
}}
onEnter={(value) => {
alert(value);
}}
placeholder="Enter Username"
/>
`
#### With Label and With Required
Demo
`js static`
import Input from '@hawk-ui/input';`js
initialState = {
value: '',
};
type="text"
onChange={(event) => {
setState({
value: event.target.value,
});
}}
onEnter={(value) => {
alert(value);
}}
placeholder="Enter Username"
label="Username"
isRequired
isError
errorMessage="This field is a compulsory field."
/>
`
#### Textarea With Label
Demo
`js static`
import Input from '@hawk-ui/input';`js
initialState = {
value: '',
};
type="text"
isTextarea
htmlAttributes={{
rows: '3',
cols: '30',
}}
onChange={(event) => {
setState({
value: event.target.value,
});
}}
onEnter={(value) => {
alert(value);
}}
placeholder="Enter Address"
label="Address"
/>
``