elementswift.field v3.0.1

elementswift.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 elementswift.field

Usage

import React from 'react';
import Field from 'elementswift.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 a value and a label key.
• className (string): Additional CSS class to apply to the field component.

Example with all props

import React from 'react';
import Field from 'elementswift.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