Groovinads UI is a React component library that provides ready-to-use UI elements based on the Groovinads UI kit. This library is designed to facilitate the implementation of common UI elements in Groovinads applications.

---

Included components

The library includes the following components:

- Context Providers:
- ThemeProvider: For managing application theme (light, dark, system).

- 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.
- Dropzone: For drag-and-drop file uploads with progress tracking.
- Input: For user data entry.
- InputChip: For dynamically managing and displaying keywords.
- InputEmail: For managing email lists.
- Radio: For exclusive selections.
- Slider: For selecting values using a slider control.
- Switch: For toggle states.
- Textarea: For multiline text input.

- Labels:
- Alert: For displaying alerts.
- BlockIcon: For displaying icons with block containers.
- Card: For containing and grouping related content.
- EditableContent: For inline editing of text content.
- Icon: For displaying icons.
- LoginSource: For show icons of login sources.
- PillComponent: For displaying information.
- ProgressBar: For displaying progress indicators.
- Spinner: For loading animations.
- StatusIcon: For displaying status icons.

- Modals:
- ModalComponent: For displaying modals.

- Navigation:
- Accordion: For collapsible content sections.
- 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.

``html







`

Installation

1. Configure FontAwesome Pro Access

This library requires FontAwesome Pro packages. Before installing, you need to configure access to the FontAwesome Pro registry.

$3

Create or update .yarnrc.yml in your project root:

`yaml
npmScopes:
fortawesome:
npmAlwaysAuth: true
npmRegistryServer: "https://npm.fontawesome.com/"
npmAuthToken: "YOUR_FONTAWESOME_TOKEN_HERE"
awesome.me:
npmAlwaysAuth: true
npmRegistryServer: "https://npm.fontawesome.com/"
npmAuthToken: "YOUR_FONTAWESOME_TOKEN_HERE"
`

$3

Create or update .npmrc in your project root:

`
@fortawesome:registry=https://npm.fontawesome.com/
@awesome.me:registry=https://npm.fontawesome.com/
//npm.fontawesome.com/:_authToken=YOUR_FONTAWESOME_TOKEN_HERE
`

Replace YOUR_FONTAWESOME_TOKEN_HERE with your FontAwesome Pro token (available at https://fontawesome.com/account).

Note: This library is for internal use only and requires a valid FontAwesome Pro license.

Important: Check your Yarn version with yarn --version:
- If you see 1.x.x, use the .npmrc file
- If you see 2.x.x or higher, use the .yarnrc.yml file

2. Install Required Dependencies

This library requires several peer dependencies. Install them first:

`bash


For npm users

npm install @awesome.me/kit-YOUR_CODE_HERE@^1.0.3 \
@fortawesome/fontawesome-svg-core@^7.1.0 \
@fortawesome/free-brands-svg-icons@^7.1.0 \
@fortawesome/duotone-regular-svg-icons@^7.1.0 \
@fortawesome/pro-duotone-svg-icons@^7.1.0 \
@fortawesome/pro-regular-svg-icons@^7.1.0 \
@fortawesome/pro-solid-svg-icons@^7.1.0 \
@fortawesome/react-fontawesome@^3.1.1 \
react-datepicker@^7.3.0 \
react-loading-skeleton@^3.5.0 \
react-responsive@^10.0.0

For Yarn users

yarn add @awesome.me/kit-YOUR_CODE_HERE@^1.0.3 \
@fortawesome/fontawesome-svg-core@^7.1.0 \
@fortawesome/free-brands-svg-icons@^7.1.0 \
@fortawesome/duotone-regular-svg-icons@^7.1.0 \
@fortawesome/pro-duotone-svg-icons@^7.1.0 \
@fortawesome/pro-regular-svg-icons@^7.1.0 \
@fortawesome/pro-solid-svg-icons@^7.1.0 \
@fortawesome/react-fontawesome@^3.1.1 \
react-datepicker@^7.3.0 \
react-loading-skeleton@^3.5.0 \
react-responsive@^10.0.0
`

3. Install the Library

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

`bash
yarn add groovinads-ui
`

Usage

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

Context Providers

$3

The ThemeProvider manages the application's theme system, supporting three modes: 'light', 'dark', and 'default' (system preference).

#### Features

- Automatic theme persistence: Theme preference is saved to browser cookies
- Cross-subdomain sharing: Optional rootDomain prop enables theme sharing across subdomains
- System integration: 'default' mode respects the operating system theme
- SSR-safe: Works correctly with Server-Side Rendering
- Auto-sync with DOM: Automatically sets data-theme attribute on document.documentElement

#### Basic Usage

Wrap your application root with the ThemeProvider:

`jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'groovinads-ui';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')).render(





);
`

#### Cross-Subdomain Theme Sharing

By default, theme preferences are automatically shared across all Groovinads subdomains (.groovinads.com):

`jsx
import React from 'react';
import ReactDOM from 'react-dom/client';
import { ThemeProvider } from 'groovinads-ui';
import App from './App';

// Default behavior - shares theme across all *.groovinads.com subdomains
ReactDOM.createRoot(document.getElementById('root')).render(





);
`

Custom Domain or Disable Cross-Subdomain:

`jsx
// Custom domain




// Disable cross-subdomain (current domain only)



`

Important Notes:
- Default: .groovinads.com - theme is shared across all subdomains
- The rootDomain should start with a dot (.) to work across all subdomains
- On localhost, the domain attribute is automatically omitted for local development
- Cookie is stored with a 1-year expiration and SameSite=Lax for security

#### Using the useTheme Hook

Access and control the theme from any component:

`jsx
import React from 'react';
import { useTheme } from 'groovinads-ui';

function ThemeSelector() {
const { theme, setTheme, isLight, isDark, isDefault } = useTheme();

return (



);
}
`

#### Props

| Prop | Type | Default | Description |
|------|------|---------|-------------|
| children | ReactNode | required | Application content to wrap with theme context |
| initialTheme | 'light' \| 'dark' \| 'default' | 'default' | Initial theme value (overrides cookie on mount) |
| rootDomain | string | '.groovinads.com' | Root domain for cross-subdomain cookies. Theme is automatically shared across all subdomains. Set to null to disable cross-subdomain sharing. |

#### useTheme Return Value

| Property | Type | Description |
|----------|------|-------------|
| theme | 'light' \| 'dark' \| 'default' | Current active theme |
| setTheme | (theme: ThemeMode) => void | Function to change theme |
| isLight | boolean | true if theme is 'light' |
| isDark | boolean | true if theme is 'dark' |
| isDefault | boolean | true if theme is 'default' |

#### Implementation Notes

- Cookie Storage: Theme preference is stored in a cookie named theme_pref
- When theme is 'default': The data-theme attribute is removed from the HTML element and the cookie is deleted
- When theme is 'light' or 'dark': The data-theme attribute is set on document.documentElement and the preference is saved to a cookie with 1-year expiration
- Cross-Subdomain: When rootDomain is provided, the cookie is set with the domain attribute to share across subdomains
- Localhost Handling: On localhost, the domain attribute is automatically omitted to work in local development
- SSR-Safe: The component checks for window existence before accessing document.cookie or document
- Security: Cookies are set with SameSite=Lax and path=/ for security and accessibility

#### Integration with Navbar

The Navbar component with showUserMenu={true} automatically includes a theme selector in the user dropdown menu when wrapped with ThemeProvider.

`jsx
import React from 'react';
import { ThemeProvider, Navbar } from 'groovinads-ui';

function App() {
return (

showUserMenu={true}
userData={userData}
/>
{/ Rest of your app /}

);
}
`

Buttons

$3

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

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

| Property | Type | Required | Options | Default | Description |
| ------------------------- | -------- | -------- | --------------------------------------------- | --------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| badge | String | No | n/a | n/a | Badge content to display as a data-badge attribute on the button element. Useful for notification counts or status indicators. |
| 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:

$3

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:

`jsx
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
showError={showError}
requiredText="Please select an option"
// ... other props
/>
`

---




$3

`jsx
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 (
show={show}
setShow={setShow}
autoClose={true}
label='Category'
selectedValue={selected}
variant='input'
fullWidth
>

setSelected('Option 1')}>
Option 1

setSelected('Option 2')}>
Option 2

setSelected('Option 3')}>
Option 3



);
};

export default DropdownComponentExample;
`

##### Dropdown with submenu

`jsx
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 (
show={showParent}
setShow={setShowParent}
autoClose='outside'
label='Parent Menu'
variant='primary'
>


show={showChild}
setShow={setShowChild}
autoClose={true}
label='Child Menu'
variant='primary'
isChild
drop='end'
>

Submenu Item 1
Submenu Item 2
Submenu Item 3



Regular Item 1
Regular Item 2


);
};

export default NestedDropdownExample;
`

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

$3

`jsx
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 (


);
};

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. |
| helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. |
| 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. |

$3

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

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. |
| helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. |
| 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. |

$3

`jsx
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 (
<>
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 /}
{...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 |
| helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. |
| 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. |

$3

`jsx
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 (
<>
setShow(!show)}>Toggle


);
};

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. |
| helpText | String | No | n/a | n/a | Help text displayed below the dropdown to provide additional guidance to the user. |
| 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. |

$3

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

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

return (
className=''
id='acceptTerms'
name='terms'
status={accepted}
setStatus={setAccepted}
>
{children}

);
};

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

$3

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

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

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

return (


);
};

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