abaabil.field
A versatile form field component for React, which supports various types of fields like input, textarea, select, and more with various styling options.
Installation
npm install abaabil.field
Usage
import React from 'react';
import Field from 'abaabil.field';
function MyApp() {
return (
<Field
id="username"
label="Username"
type="text"
size="medium"
variant="primary"
onChange={(e) => console.log(e.target.value)}
/>
);
}
Props
-
id
(string, required): A unique identifier for the field. -
label
(string): Label text for the field. -
size
(string, default:medium
): The size of the field. Options are:small
medium
'large
-
type
(string, default:text
): The type of the field. Options are:text
password
checkbox
radio
textarea
select
-
variant
(string, default:primary
): Styling variant of the field. Options are:primary
success
warning
danger
info
-
value
(string | boolean): The current value of the field. -
onChange
(function): Handler for the change event. -
placeholder
(string): Placeholder text for text, password, and textarea field types. -
errorMessage
(string): Display an error message below the field. -
note
(string): Additional note to display beside the field (mainly used for checkbox). -
options
(array): An array of options for select type, each object in the array should contain avalue
and alabel
key. -
className
(string): Additional CSS class to apply to the field component.
Example with all props
import React from 'react';
import Field from 'abaabil.field';
function MyApp() {
return (
<>
{/* Input field */}
<Field
id="username"
label="Username"
type="text"
size="medium"
variant="primary"
value="John Doe"
onChange={(e) => console.log(e.target.value)}
placeholder="Enter your username"
errorMessage="Username is required"
/>
{/* Password field */}
<Field
id="password"
label="Password"
type="password"
size="medium"
variant="primary"
value="123456"
onChange={(e) => console.log(e.target.value)}
placeholder="Enter your password"
errorMessage="Password is required"
/>
{/* Checkbox field */}
<Field
id="rememberMe"
type="checkbox"
size="medium"
variant="primary"
value={true}
onChange={(e) => console.log(e.target.checked)}
label="Remember me"
note="Note: This is a checkbox"
/>
{/* Select field */}
<Field
id="country"
label="Country"
type="select"
size="medium"
variant="primary"
value="US"
onChange={(e) => console.log(e.target.value)}
placeholder="Select your country"
options={[
{ value: 'US', label: 'United States' },
{ value: 'CA', label: 'Canada' },
{ value: 'MX', label: 'Mexico' },
]}
errorMessage="Country is required"
/>
{/* Textarea field */}
<Field
id="message"
label="Message"
type="textarea"
size="medium"
variant="primary"
value="Hello world"
onChange={(e) => console.log(e.target.value)}
placeholder="Enter your message"
errorMessage="Message is required"
/>
</>
);
}
License
MIT