@hawk-ui/input
v4.4.4
Published
hawk-ui: Basic Input Component
Downloads
1,254
Maintainers
Readme
Installation
To install a component run
$ npm install @hawk-ui/input --save
Please import CSS styles via
@import '/path__to__node_modules/@hawk-ui/input/dist/index.min.css
Usage
Without Label and Without Required:
import Input from '@hawk-ui/input';
initialState = {
value: '',
};
<Input
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
import Input from '@hawk-ui/input';
initialState = {
value: '',
};
<Input
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
import Input from '@hawk-ui/input';
initialState = {
value: '',
};
<Input
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
import Input from '@hawk-ui/input';
initialState = {
value: '',
};
<Input
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
import Input from '@hawk-ui/input';
initialState = {
value: '',
};
<Input
type="text"
isTextarea
htmlAttributes={{
rows: '3',
cols: '30',
}}
onChange={(event) => {
setState({
value: event.target.value,
});
}}
onEnter={(value) => {
alert(value);
}}
placeholder="Enter Address"
label="Address"
/>