groovinads-ui

v1.9.93

Published

3 days ago

Groovinads UI is a React component library designed exclusively for Groovinads applications. It provides ready-to-use UI elements styled according to Groovinads design guidelines to facilitate rapid development.

0High
0Medium
0Low

pablo.pinero

css sass groovinads responsive front-end components

Included components

The library includes the following components:

Buttons:
- Button: For user actions.
Dropdowns:
- DropdownComponent: For dropdown menus.
- DropdownDatePicker: For filter dropdowns.
- DropdownFilter: For filter dropdowns.
- DropdownMultiSelect: For dynamically managing and displaying keywords.
- DropdownSimpleDatePicker: For filter dropdowns.
Inputs:
- Checkbox: For multiple option selections.
- Input: For user data entry.
- InputChip: For dynamically managing and displaying keywords.
- InputEmail: For managing email lists, including adding, displaying, and deleting email addresses.
- Radio: For exclusive selections.
- Switch: For toggle states.
- Textarea: For multiline text input.
Labels:
- Alert: For displaying alerts.
- EditableContent: For inline editing of text content.
- Icon: For displaying icons.
- LoginSource: For show icons of login sources.
- PillComponent: For displaying information.
- Spinner: For loading animations.
- StatusIcon: For displaying status icons.
Modals:
- ModalComponent: For displaying modals.
Navigation:
- Aside: For displaying aside panels.
- Navbar: For top navigation bars.
- Pagination: For pagination of tables.
- Sidebar: For side navigation bars.
- Stepper: For step-by-step navigation.
- Tabnav: For tab navigation.
Tables:
- TableSkeleton: For displaying table skeletons.
Toasts:
- ToastComponent: For displaying notifications.
- ToastProgress: For displaying progress notifications.

Requirements

The component styles must be included from: https://ui.groovinads.com/2.0.0/styles.min.css.
npm (v20 or higher).
Font Awesome icons must be included in the project.

⚠️ Important: Use of additional CSS libraries

When utilizing external libraries that require additional CSS styles, it is important to ensure that these styles are not added directly to individual components. Instead, they should be included in the index.html file of your project. This ensures that all styles are loaded correctly and in the desired order. Specifically, make sure that the CSS file https://ui.groovinads.com/2.0.0/styles.min.css is the last one to be loaded to avoid style conflicts and ensure that the default Groovinads styles have the proper priority.

<!-- Example of how to include additional CSS styles in index.html -->
<head>
	<!-- Other CSS files -->
	<link rel="stylesheet" href="https://example.com/external-library.css" />
	<!-- Groovinads CSS file, ensure it is the last to be loaded -->
	<link rel="stylesheet" href="https://ui.groovinads.com/2.0.0/styles.min.css" />
</head>

Installation

To use the Groovinads UI library in your project, run the following command:

yarn add groovinads-ui

Usage

Here are examples of how to use the components included in the Groovinads UI library:

Buttons

Button

import React from 'react';
import { Button } from 'groovinads-ui';

<Button
	variant={'outline'}
	size={'sm'}
	onClick={() => {
		console.log('Button clicked');
	}}
	startIcon={'plus'}
	endIcon={'arrow-right'}
	style={'warning'}
	className={'mb-5'}
	processing={true}
>
	Let's groove!
</Button>;

| Property | Type | Required | Options | Default | Description | | ------------------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | children | Node | No | n/a | n/a | If true, children will be displayed alongside the spinner with '…' added to indicate the processing status in the label. If false, only the spinner will be shown. It can include text, icons, or other components. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the button. | | disabled | Boolean | No | true false | false | If true, disables the button. If false, the button is enabled. | | endIcon | String | No | n/a | n/a | Specifies the name of the icon to be displayed at the end of the button (after the text). | | hideLabelOnDesktop | Boolean | No | true false | false | If true, the text inside the button will not be displayed on desktop (only visible on mobile). Cannot be used together with hideLabelOnMobile. | | hideLabelOnMobile | Boolean | No | true false | false | If true, the text inside the button will not be displayed on mobile. If false, the text will be displayed on mobile. Cannot be used together with hideLabelOnDesktop. | | onClick | Function | No | n/a | n/a | Function to be executed when the button is clicked. | | processing | Boolean | No | true false | false | If true, displays a loading animation (…) with a spinner. If false, it will not be displayed. | | size | String | No | sm md lg | md | Defines the size of the button. It's optional. | | startIcon | String | No | n/a | n/a | Specifies the name of the icon to be displayed at the start of the button (before the text). | | style | String | No | default success danger warning link | default | Specifies the style variant of the button, which can change its color and visual appearance. It's optional. | | variant | String | No | primary secondary terciary outline | primary | Defines the visual style of the button. It's optional. |

Dropdowns

All dropdown components support a unified validation system:

Validation System

All form dropdowns (DropdownComponent, DropdownFilter, DropdownMultiSelect, DropdownDatePicker, DropdownSimpleDatePicker) share a consistent validation approach:

showError (Boolean): Controls the visual error state. When true, applies the not-validated CSS class to the toggle.
requiredText (String): Custom error message displayed via the data-error attribute.
External Control: Validation state is managed by the parent component, providing full flexibility.
Auto-clear: Error messages can be configured to automatically disappear after 2 seconds (implemented in parent component).

Example validation pattern:

const [showError, setShowError] = useState(false);

const handleValidate = () => {
	if (!isValid) {
		setShowError(true);
		// Auto-hide after 2 seconds
		setTimeout(() => setShowError(false), 2000);
	} else {
		setShowError(false);
		// Validation passed
	}
};

// In the dropdown component
<DropdownComponent
	showError={showError}
	requiredText="Please select an option"
	// ... other props
/>

DropdownComponent

import React, { useState } from 'react';
import { DropdownComponent } from 'groovinads-ui';
import { DropdownMenu, DropdownItem } from 'react-bootstrap';

const DropdownComponentExample = () => {
	const [show, setShow] = useState(false);
	const [selected, setSelected] = useState('');

	return (
		<DropdownComponent
			show={show}
			setShow={setShow}
			autoClose={true}
			label='Category'
			selectedValue={selected}
			variant='input'
			fullWidth
		>
			<DropdownMenu>
				<DropdownItem onClick={() => setSelected('Option 1')}>
					Option 1
				</DropdownItem>
				<DropdownItem onClick={() => setSelected('Option 2')}>
					Option 2
				</DropdownItem>
				<DropdownItem onClick={() => setSelected('Option 3')}>
					Option 3
				</DropdownItem>
			</DropdownMenu>
		</DropdownComponent>
	);
};

export default DropdownComponentExample;

Dropdown with submenu

import React, { useState } from 'react';
import { DropdownComponent } from 'groovinads-ui';
import { DropdownMenu, DropdownItem } from 'react-bootstrap';

const NestedDropdownExample = () => {
	const [showParent, setShowParent] = useState(false);
	const [showChild, setShowChild] = useState(false);

	return (
		<DropdownComponent
			show={showParent}
			setShow={setShowParent}
			autoClose='outside'
			label='Parent Menu'
			variant='primary'
		>
			<DropdownMenu>
				<DropdownItem>
					<DropdownComponent
						show={showChild}
						setShow={setShowChild}
						autoClose={true}
						label='Child Menu'
						variant='primary'
						isChild
						drop='end'
					>
						<DropdownMenu>
							<DropdownItem>Submenu Item 1</DropdownItem>
							<DropdownItem>Submenu Item 2</DropdownItem>
							<DropdownItem>Submenu Item 3</DropdownItem>
						</DropdownMenu>
					</DropdownComponent>
				</DropdownItem>
				<DropdownItem>Regular Item 1</DropdownItem>
				<DropdownItem>Regular Item 2</DropdownItem>
			</DropdownMenu>
		</DropdownComponent>
	);
};

export default NestedDropdownExample;

| Property | Type | --------------- | align | autoClose | children | className | disabled | drop | fullWidth | icon | isChild | label | onToggle | overflow | processing | requiredText | selectedValue | Node | setShow | show | showError | size | style | variant | Required | Options | Default | Description | | ---------------- | -------- | ------------------------------------------------------ | --------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------- | | String | No | start end | start | Determines the alignment of the dropdown menu relative to the toggle. | | Boolean / String | No | true false outside inside | false | Determines when the dropdown should auto-close. If true or inside, it closes on inside click. If outside, it closes on outside click. | | Node | Yes | n/a | n/a | DropdownMenu component to be rendered inside the dropdown. | | String | No | n/a | '' | Adds a custom CSS class to the dropdown container. | | Boolean | No | true false | false | If true, disables the dropdown. | | String | No | up down start end | n/a | Determines the direction in which the dropdown menu will be displayed. Caret icon adapts automatically. | | Boolean | No | true false | false | If true, makes the dropdown menu match the toggle button width dynamically. | | String | No | n/a | n/a | FontAwesome icon name to display before the label in the toggle button. | | Boolean | No | true false | false | If true, renders the toggle without button styles (useful for nested dropdowns). | | Node | No | n/a | n/a | Label text for the dropdown toggle button. | | Function | No | n/a | n/a | Callback function triggered when dropdown visibility changes. | | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations with fixed positioning. | | Boolean | No | true false | false | If true, shows a spinner instead of the icon, appends "…" to the label, and disables the dropdown. | | String | No | n/a | n/a | Error message displayed when validation fails. Used with showError prop. | | No | n/a | n/a | Selected value to display (used with variant='input' to show the current selection). | | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | Boolean | No | true false | n/a | Controls the visibility of the dropdown. If true, the dropdown is visible; if false, it is hidden. | | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Used for validation. | | String | No | sm md lg | md | Size of the toggle button. | | String | No | default success danger warning link | default | Style/color scheme of the toggle button. | | String | No | primary secondary terciary outline input | primary | Variant of the toggle button. Use input for form-field style dropdowns with label and selected value display. |

DropdownDatePicker

import { DropdownDatePicker } from 'groovinads-ui';
import React, { useState } from 'react';

const DropdownDatePickerExample = () => {
	const [show, setShow] = useState(false);
	const [dateFrom, setDateFrom] = useState(null);
	const [dateTo, setDateTo] = useState(null);

	const handleToggle = () => {
		setShow((prevShow) => !prevShow);
	};

	const handleRemoveFilter = () => {
		setDateFrom(null);
		setDateTo(null);
	};

	return (
		<div>
			<DropdownFilter
				variant='filter'
				show={show}
				setShow={setShow}
				onToggle={handleToggle}
				label='Select Period'
				locked={false}
				overflow={true}
				onRemoveFilter={handleRemoveFilter}
				dateFrom={dateFrom}
				setDateFrom={setDateFrom}
				dateTo={dateTo}
				setDateTo={setDateTo}
				minDate={new Date('2025-01-01')}
				maxDate={new Date('2025-01-31')}
			/>
		</div>
	);
};

export default DropdownDatePickerExample;

| Property | Type | Required | Option | Default | Description | | ---------------- | -------- | -------- | ---------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------- | | className | String | No | n/a | n/a | Adds a custom CSS class to the component. | | dateFrom | String | No | n/a | null | Start date. | | dateTo | String | No | n/a | null | End date. | | disabled | Boolean | No | true false | false | If true, disables the dropdown. If false, the dropdown is enabled. | | label | String | No | n/a | period | Label to display on the dropdown toggle button. | | locked | Boolean | No | true false | false | Determines if the dropdown is locked. If true, it is not interactive. If false, it is interactive. | | maxDate | Object | No | n/a | n/a | Max date filter. | | minDate | Object | No | n/a | n/a | Min date filter. | | onRemoveFilter | Function | No | n/a | n/a | Remove the filter when the remove filter button is clicked. | | onToggle | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | requiredText | String | No | n/a | n/a | Error message displayed when validation fails. Used with showError prop. | | searchLabel | String | No | n/a | Search | Label to display on the search input. | | setDateFrom | Function | No | n/a | n/a | Allows updating the start date of the date range. Function to update the start date of the range to be selected. | | setDateTo | Function | No | n/a | n/a | Allows you to update the end date of the selection range. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | show | Boolean | No | true false | false | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. | | showError | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Controlled externally for validation. | | size | String | No | sm md lg | md | Size of the toggle button. | | variant | String | No | input filter | input | Determines the type of dropdown. If input, it will be displayed as a button. If filter, it will be displayed as a filter dropdown. |

DropdownFilter

import React from 'react';
import { DropdownFilter } from 'groovinads-ui';

<DropdownFilter
	title='Filter'
	valuesSelected={['Value1', 'Value2']}
	setValuesSelected={(newValues) => console.log(newValues)}
	values={['Value1', 'Value2', 'Value3']}
	menuType='simple'
	locked={false}
	onRemoveFilter={() => console.log('Filter removed')}
	show={true}
	onToggle={(isOpen) => console.log(isOpen)}
	overflow={false}
	className='custom-class'
/>;

| Property | Type | Required | Options | Default | Description | | ------------------- | -------- | -------- | -------------------------- | -------- | --------------------------------------------------------- | | autoClose | Boolean | No | true false outside | false | Controls when the dropdown menu closes. If false, the menu does not close on click. If true, it closes when clicking an item in the list or outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list. | | className | String | No | n/a | n/a | Additional CSS class names. | | disabled | Boolean | No | true false | false | If true, disables the dropdown. If false, the dropdown is enabled. | | locked | Boolean | No | true false | false | If true, the filter cannot be removed. | | menuType | String | No | simple selection | simple | Type of dropdown menu. | | onRemoveFilter | Function | No | n/a | n/a | Function to handle filter removal. | | onToggle | Function | No | n/a | n/a | Function to handle toggle state changes. | | overflow | Boolean | No | true false | false | Whether to enable overflow strategy for the dropdown. | | requiredText | String | No | n/a | n/a | Error message displayed when validation fails. Used with showError prop. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | setValuesSelected | Function | No | n/a | n/a | Function to set the selected values. | | show | Boolean | No | true false | n/a | Controls the visibility of the dropdown. | | showError | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Controlled externally for validation. | | title | String | No | n/a | n/a | Title of the dropdown filter. | | values | Array | No | n/a | [ ] | Available values for selection. | | valuesSelected | Array | No | n/a | [ ] | Available values for selection. |

DropdownMultiSelect

import React, { useState } from 'react';
import { DropdownMultiSelect } from 'groovinads-ui';

const MultiSelectComponent = () => {
	const [selectedValues, setSelectedValues] = useState([]);
	const [selectedValues1, setSelectedValues1] = useState([]);

	const [show, setShow] = useState(false);
	const [show1, setShow1] = useState(false);

	const handleToggle = () => setShow((prevShow) => !prevShow);
	const handleToggle1 = () => setShow1((prevShow) => !prevShow);

	const [filters] = useState([
		{ id: 1, name: 'Filter 1', showStatus: '1' },
		{ id: 2, name: 'Filter 2', showStatus: '0' },
		{ id: 3, name: 'Filter 3', showStatus: '1' },
		{ id: 4, name: 'Filter 4', showStatus: '0' },
		{ id: 5, name: 'Filter 5', showStatus: '0' },
		{ id: 6, name: 'Filter 6', showStatus: '2' },
	]);
	CUSTOM; /*  */
	const filters2 = [
		{ id: 1, name: 'Filter 1', showStatus: '1', name1: 'loreal' },
		{ id: 2, name: 'Filter 2', showStatus: '0', name1: 'jabon' },
		{ id: 3, name: 'Filter 3', showStatus: '1', name1: 'blue' },
		{ id: 4, name: 'Filter 4', showStatus: '0', name1: 'name' },
		{ id: 5, name: 'Filter 5', showStatus: '0', name1: 'name' },
		{ id: 6, name: 'Filter 6', showStatus: '2', name1: 'name' },
	];

	return (
		<>
			<DropdownMultiSelect
				valuesSelected={selectedValues}
				setValuesSelected={setSelectedValues}
				values={filters}
				show={show}
				onToggle={handleToggle}
				object={true}
				nameKey='name'
				idKey='id'
				label='Filters'
				focus={show}
				buttonVariant='primary'
				nowrap={true}
				showError={false}
				requiredText='Please select at least one filter'
			/>
			{/* OPCION 1 */}
			<DropdownMultiSelect
				{...args}
				values={filters1}
				valuesSelected={selectedValues1}
				setValuesSelected={setSelectedValues1}
				show={show1}
				onToggle={handleToggle1}
				object={true}
				nameKey='name'
				nameKey1='name1'
				idKey={'id'}
				label={'Filters (array de objetos)'}
				focus={show}
				hasId={false}
				showError={false}
				requiredText='Please select at least one filter'
			/>
		</>
	);
};

export default MultiSelectComponent;

| Property | Type | Required | Options | Default | Description | | ---------------------- | ---------------- | -------- | --------------------------------- | ------------------------------------------ | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | autoClose | Boolean / String | No | true false inside outside | false | Controls when the dropdown menu closes. If false, the menu does not close on click. If true, it closes when clicking an item in the list or outside the menu. If inside, it closes when clicking an item in the list but not when clicking outside the menu. If outside, it closes when clicking outside the menu but not when clicking an item in the list. | | buttonVariant | String | No | input | primary secondary terciary outline | Defines the visual style of the button, used to toggle the dropdown menu. | | className | String | No | n/a | n/a | Adds custom CSS properties to style the component. | | customKey | String | No | n/a | n/a | You must provide the name of a key within an object. It will allow customization of the displayed value by internally concatenating and displaying "nameKey - customKey" | | drop | String | No | up down | n/a | Specifies the direction in which the dropdown should open. | | focus | Boolean | No | true false | false | If true, the search input will be focused when the dropdown is shown. | | hasId | Boolean | No | true false | true | Controls wether the hashtag and id shows or not in the dropdown options | | idInPill | Boolean | No | true false | false | If true, ID will be shown in the pill component. | | idKey | String | No | n/a | n/a | Defines the key used in the object to find the item's ID, allowing for the identification and handling of selected items and other operations within the component. | | label | String | No | n/a | '' | Allows customizing the label for the input field within the dropdown menu. | | nameKey | String | No | n/a | n/a | Defines the key that will be used in the object to display the item's name. | | notMatchedText | String | No | n/a | 'No match found' | Text displayed when no matching items are found. | | nowrap | Boolean | No | true false | false | If true, the content will be displayed on a single line. If it exceeds the width, a scroll will be shown. If false, it will fit the width of the button. If it exceeds, the content will be displayed on multiple lines. | | object | Boolean | No | true false | false | object determines whether the values in values are objects (with properties nameKey and idKey) or simple values (strings or numbers). | | onToggle | Function | No | n/a | n/a | Contains the handleToggle function which handles changing the show state between true and false, toggling the visibility of the menu. | | overflow | Boolean | No | true false | false | Whether to enable overflow strategy for the dropdown. | | requiredText | String | No | n/a | 'Required' | Error message displayed when validation fails. Used with showError prop. | | searchLabel | String | No | n/a | 'Search' | Label for the search input field. | | setValuesSelected | Function | No | n/a | n/a | Allows users to control the values that are currently selected. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | show | Boolean | No | true false | n/a | Controls the visibility of the dropdown. | | showError | Boolean | No | true false | false | If true, displays the dropdown in error state with not-validated class. Controlled externally for validation. | | showStatus | String | No | n/a | String | Filter items by status if applicable. | | size | String | No | sm md lg | md | Size of the toggle button. | | values | Array | No | n/a | [ ] | Available values for selection. | | valuesSelected | Array / Object | No | n/a | [ ] | Represents the state of the values that are currently selected. |

DropdownSimpleDatePicker

import { DropdownDatePicker } from 'groovinads-ui';
import React, { useState } from 'react';

const DropdownSimpleDatePickerExample = () => {
	const [show, setShow] = useState(false);

	const [date, setDate] = useState('');

	const clearStartDate = () => {
		// Resets the date and updates the state as needed. Adjust as required.
		setDate(null);
		setShowDateDropdown(false);
		closeDateDropdown();
		markSelectedPlacements();
		setKey((prevKey) => prevKey + 1);
	};


	return (
		<>
			<button onClick={() => setShow(!show)}>Toggle</button>
			<div className='col-2'>
				<DropdownSimpleDatePicker
					{...args}
					date={date}
					setDate={setDate}
					handleClear={ExampleClearDate}
					minDate={new Date('2025-01-01')}
					maxDate={new Date('2025-01-31')}
				/>
			</div>
		</button>
	);
};

export default DropdownSimpleDatePickerExample;

| Property | Type | Required | Option | Default | Description | | -------------- | -------- | -------- | -------------- | -------- | -------------------------------------------------------------------------------------------------------------------------------------------------------- | | className | String | No | n/a | n/a | Adds a custom CSS class to the component. | | date | String | No | n/a | null | Selected date. | | disabled | Boolean | No | true false | false | If true, disables the dropdown. If false, the dropdown is enabled. | | handleClear | Function | No | n/a | n/a | Allows providing, as needed, a function to reset the date, update the state as necessary, etc. If none is provided, the date will be cleared by default. | | label | String | No | n/a | period | Label to display on the dropdown toggle button. | | maxDate | Object | No | n/a | n/a | Max date filter. | | minDate | Object | No | n/a | n/a | Min date filter. | | onToggle | Function | No | n/a | n/a | Function that is called when the dropdown is toggled. | | overflow | Boolean | No | true false | false | Adjusts the dropdown's position to handle overflow situations. | | requiredText | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. | | setDate | Function | No | n/a | n/a | Function that updates the start date. | | setShow | Function | No | n/a | n/a | Function to update the visibility state of the dropdown. | | show | Boolean | No | true false | false | Controls the visibility of the dropdown. If true, the dropdown is displayed; if false, it is hidden. | | showError | Boolean | No | true false | false | If true, the input will be displayed with an error. | | size | String | No | sm md lg | md | Size of the toggle button. |

Checkbox

import React, { useState } from 'react';
import { Checkbox } from 'groovinads-ui';

const CheckboxComponent = () => {
	const [accepted, setAccepted] = useState(false);

	return (
		<Checkbox
			className=''
			id='acceptTerms'
			name='terms'
			status={accepted}
			setStatus={setAccepted}
		>
			{children}
		</Checkbox>
	);
};

export default CheckboxComponent;

| Property | Type | Required | Options | Default | Description | | ----------- | -------- | -------- | -------------- | ------- | ------------------------------------------------------------------------------------------------------------- | | children | Node | No | n/a | n/a | Content that is rendered as the label for the checkbox. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the checkbox. | | disabled | Boolean | No | true false | false | If true, disables the checkbox. If false, the checkbox is enabled. | | id | String | No | n/a | n/a | The unique identifier for the checkbox. It's required for associating the label and checkbox. | | name | String | No | n/a | n/a | The name attribute of the checkbox. Used to identify the form data after it's submitted. | | setStatus | Function | No | n/a | n/a | Function to set the status of the checkbox. This is a handler function typically used for state management. | | size | String | No | sm md lg | md | Sets the size of the checkbox. | | status | Boolean | No | true false | false | Indicates whether the checkbox is checked, true or unchecked false. |

Input

import React from 'react';
import { Input } from 'groovinads-ui';

const InputComponent = () => {
	const handleInputChange = () => {
		console.log('Input changed');
	};

	const handleShowError = (showError) => {
		console.log(showError);
	};

	return (
		<div>
			<Input
				className={'mb-5'}
				helpText={'This is a text'}
				label={'Input label'}
				name={'input'}
				onChange={handleInputChange}
				requiredText={'This field is required'}
				showError={false}
				setShowError={handleShowError}
				type={'text'}
				disabled={false}
				icon={'user'}
				prefix={'DD/MM/YYYY'}
				suffix={'GMT'}
				size={'md'}
				value={''}
				autoFocus={false}
				customRef={null}
			/>
		</div>
	);
};

export default InputComponent;

| Property | Type | Required | Options | Default | Description | | -------------- | --------------- | -------- | ------------------------------------------------------------------------------------------------------------------- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------- | | autoFocus | Boolean | No | true false | false | If true, automatically focuses the input when the component mounts. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the input. | | disabled | Boolean | No | true false | false | If true, disables the input field. | | focus | Boolean | No | true false | false | Controls whether the input field should automatically receive focus when the component is rendered. | | helpText | String | No | n/a | n/a | Optional text under the input to guide the user or provide additional information. | | icon | String | No | n/a | n/a | Specifies the name of the icon to be displayed inside the input. | | label | String | No | n/a | 'Input label' | Input field that handles different type of data based on the assigned type prop. Allows for adding icons, managing error messages, and other functionalities. | | max | Number | No | n/a | n/a | Specifies the maximum value that the input field can accept. | | maxLength | Number | No | n/a | n/a | Specifies the maximum number of characters that the input field can accept. | | min | Number | No | n/a | n/a | Specifies the minimum value that the input field can accept. | | name | String | No | n/a | n/a | Indicates the name attribute for the input element, which represents the form data after it is submitted. | | onChange | Function | No | n/a | n/a | Allows the user to update the value of the input field and synchronizes the field's value with the component's internal state. | | prefix | String | No | n/a | n/a | Text or characters to display at the start of the input, e.g., 'USD' for currency. | | requiredText | String | No | n/a | n/a | Text displayed when input validation fails, used to indicate an error. | | setShowError | Function | No | n/a | n/a | Function used to change the state of showError. | | showError | Boolean | No | true false | false | If true, indicates that an error message should be displayed, usually controlled by setShowError. | | size | String | No | sm md lg | md | Sets the size of the input field. | | suffix | String | No | n/a | n/a | Optional suffix text to display inside the input field. | | type | String | No | color date datetime-local email file image month number password tel text time url week | text | Type of input | | value | String / Number | No | n/a | n/a | The value of the input. |

InputChip

import React, { useState } from 'react';
import { InputChip } from 'groovinads-ui';

const ExampleIputChip = () => (
	const  [ keywordsList, setKeywordsList] = useState(['keyword1', 'keyword2', 'keyword3']);
	const nonRecomendedKeywords = ['keyword4', 'keyword5'];
	<>
		{/* RECEIVES KEYWORDS INITIALLY */}
		<InputChip
			className={'mb-3'}
			placeholder={'Add keywords…'}
			keywordsList={keywordsList}
			setKeywordsList={setKeywordsList}
			pillColor={'green'}
			counter={true}
			maxKeywordLength={10}
			recomendedKeywords={5}
			maxKeywords={15}
			requiredText='You can only add up to 15 keywords.'
		/>

		{/* INITIALIZED EMPTY, WITHOUT KEYWORDS */}
		<InputChip
			placeholder={'Add keywords…'}
			keywordsList={keywordList2}
			setKeywordsList={setKeywordsList2}
			pillColor={'red'}
			maxKeywordLength={10}
			maxKeywords={15}
			requiredText='You can only add up to 15 keywords.'
			counter={true}
		/>
	</>
);

export default ExampleInputChip;

| Property | Type | Required | Options | Default | Description | | --------------------------- | ------- | -------- | ------------------------------------------------------------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | autoFocus | Boolean | No | true false | false | If true, automatically focuses the input when the component mounts. | | className | String | No | n/a | n/a | Additional CSS class names that can be applied to the inputChip. | | counter | Boolean | No | n/a | false | If true, it will display a progressive and numeric counter of keywords. If false, it will not display it. | | disabled | Boolean | No | true false | false | If true, disables the inputChip. If false, the inputChip is enabled. | | duplicateKeywordErrorText | String | No | n/a | 'Duplicate keyword.' | Allows you to add a custom message when trying to add a keyword that already exists. | | helpText | String | No | n/a | n/a | Help text displayed below the input field. Useful for providing additional instructions to the user. | | keywordsList | Array | Yes | n/a | n/a | This property expects an array of keywords. You can initialize it as an empty array or with keywords, and it will be updated when new keywords are added or removed from the input field. | | maxKeywords | Number | Yes | n/a | n/a | Indicates the maximum number of allowed keywords. When the keywordsList reaches this limit, an error message defined in requiredText will be displayed. Additionally, if the counter is enabled, its status will change to the 'danger' color. | | maxKeywordLength | Number | No | n/a | n/a | Indicates the maximum length of each keyword. When a keyword exceeds this limit, an error message defined in duplicateKeywordErrorText will be displayed. | | name | String | No | n/a | n/a | The name attribute of the input. Used to identify the form data after it's submitted. | | pillColor | String | No | blue danger dark green light midtone neutral red yellow | neutral | Define the color of the keyword. | | placeholder | String | Yes | n/a | 'Add keywords…' | Displays a suggested or descriptive text inside the input field before the user types. Also used to generate the input's id attribute (converted to camelCase). | | recomendedKeywords | Number | No | n/a | n/a | Specifies the recommended number of keywords. When the keywords list (keywordsList) reaches the recommended number, the counter's status will change to the 'warning' color. | | requiredText | String | Yes | n/a | n/a | Texto que se mostrará como error cuando la lista de keywords (keywordsList) alcance el límite máximo definido en maxKeywords. | | setKeywordsList | String | Yes | n/a | n/a | Dynamically updates the list of keywords. It is called when a new keyword is added or removed from the list. The updated array will be passed to the keywordsList prop.