@cogover/client-sdk

React UI components and record/object data hooks for Cogover.

? marks an optional prop or input; T is your option or record type. Tables include SDK-defined props and common inherited props. Standard HTML/SVG attributes and additional inherited tooltip props remain available through their TypeScript types.

LibraryProvider

Place LibraryProvider below your QueryClientProvider. Every component and hook reads its configuration from it. Keep the injected http and queryHooks identities stable.

import * as queryHooks from '@tanstack/react-query';
import { LibraryProvider, createHttpInstance } from '@cogover/client-sdk';
import '@cogover/client-sdk/styles.css';

const http = createHttpInstance();

<QueryClientProvider client={queryClient}>
    <LibraryProvider
        locale="vi-VN"
        themeMode="light"
        workspaceId={workspace.id}
        appSlug={appSlug}
        http={http}
        queryHooks={queryHooks}
        commonSettings={commonSettings}
    >
        <App />
    </LibraryProvider>
</QueryClientProvider>;

| Prop | Type | Description | | ------------------- | ------------------------------------------ | --------------------------------------------------------------------------------------------------------------- | | locale | string | vi/vi-VN uses Vietnamese; anything else uses English. | | themeMode | 'light' \| 'dark' | Sets data-theme on the document root. | | themeVersion? | 'v1' \| 'v2' | Sets data-theme-version (Cogover input style). Omit it when embedded: Cogover already sets it. | | workspaceId | string | Current workspace ID, sent with record requests. | | appSlug | string | Current app slug, sent as X-App-Slug and used for record page links. | | http | HttpClient | Usually createHttpInstance(); requests use the browser session of the current workspace. | | queryHooks | QueryHooks | useQuery, useInfiniteQuery, useQueries, useQueryClient and keepPreviousData from your TanStack Query. | | t? | Translate | Overrides the SDK's built-in translations. | | commonSettings? | LibraryCommonSettings | Workspace display settings and the current user, see below. Omit it and the SDK uses defaults. | | openRecordDetail? | (params: OpenRecordDetailParams) => void | Opens a record when a selected record name is clicked. Without it the record page opens in a new tab. |

commonSettings accepts the host's common settings object as is; every field is optional:

| Field | Type | Used for | | ------------------------------- | ------------------- | ----------------------------------------------------------------------------------------------- | | workspace.dateFormat? | number | Default date display format (1–7); falls back to each field's own format. | | workspace.timeFormat? | number | 1: hh:mm A, 2: HH:mm. | | workspace.numberFormat? | number | 1: 1,234.5, 2: 1.234,5; default 1. | | workspace.nameFormat? | string | Personnel name format, e.g. {first_name} {last_name}. | | workspaceAccount.personnelId? | string | Current user's personnel ID. | | personnel? | PersonnelResponse | Current user's personnel record, to pick "current user's primary department" without a request. |

Components

Import from @cogover/client-sdk/ui; load styles from @cogover/client-sdk/styles.css.

Button

Styled action button with icons and loading state.

| Prop | Type | Description | | ------------------ | ------------------------------------------------------------------ | ------------------------------------------------------------------------------- | | variant? | 'contained' \| 'outlined' \| 'text' \| 'gray' \| 'outlined-gray' | Visual style. | | size? | 'large' \| 'medium' \| 'small' | Component size. | | onlyIcon? | boolean | Displays startIcon (or endIcon as fallback), using children as tooltip content. | | startIcon? | ReactNode | Icon before button content. | | endIcon? | ReactNode | Icon after button content. | | fullWidth? | boolean | Fills the available width. | | disabledTooltip? | boolean | Disables the tooltip in icon-only mode. | | loading? | boolean | Shows a spinner and prevents activation. | | children? | ReactNode | Content rendered inside the component. | | disabled? | boolean | Disables interaction. | | onClick? | MouseEventHandler<HTMLButtonElement> | Called when the button is activated. | | type? | 'button' \| 'submit' \| 'reset' | Native input or button type. |

IconButton

Compact button for an icon.

| Prop | Type | Description | | ----------- | ------------------------------------------------------------------ | -------------------------------------- | | variant? | 'contained' \| 'outlined' \| 'text' \| 'gray' \| 'outlined-gray' | Visual style. | | size? | 'large' \| 'medium' \| 'small' | Component size. | | children? | ReactNode | Content rendered inside the component. | | disabled? | boolean | Disables interaction. | | onClick? | MouseEventHandler<HTMLButtonElement> | Called when the button is activated. | | type? | 'button' \| 'submit' \| 'reset' | Native input or button type. |

ButtonGroup

Groups buttons with a shared size and orientation.

| Prop | Type | Description | | ----------- | -------------------------------- | ---------------------------------------------- | | size? | 'large' \| 'medium' \| 'small' | Component size. | | row? | boolean | Arranges child buttons horizontally when true. | | children? | ReactNode | Child buttons to arrange and size. |

CopyButton

Copies a string to the clipboard and shows success feedback.

| Prop | Type | Description | | -------------- | ------------ | --------------------------------------- | | value | string | Controlled value. | | onClick? | () => void | Called when the button is activated. | | icon? | ReactNode | Default copy icon. | | successIcon? | ReactNode | Icon displayed after a successful copy. | | showTooltip? | boolean | Shows copy/copied tooltip feedback. |

TextField

Text or multiline input with adornments and validation display.

| Prop | Type | Description | | ------------------- | ------------------------------------------------ | ---------------------------------------------------------------- | | label? | string | Input label. | | error? | boolean | Shows error styling. | | helperTextProps? | Partial<HelperTextProps> | Additional props for the helper text. | | aiLoading? | boolean | Disables editing and displays the translated AI processing text. | | showBorderOnBlur? | boolean | Keeps the border visible while unfocused. | | helperText? | string \| null | Text displayed below the input. | | color? | 'warning' \| 'success' \| 'error' | Helper text/status color: warning, success, or error. | | fullWidth? | boolean | Fills the available width. | | startAdornment? | ReactNode \| (() => ReactNode) | Content before the input. | | endAdornment? | ReactNode \| (() => ReactNode) | Content after the input. | | inputClassName? | string | Additional CSS classes for the input. | | multipleLine? | boolean | Renders a textarea instead of a single-line input. | | rows? | number | Visible textarea row count. | | readOnly? | boolean | Renders the value as non-editable display content. | | isFocused? | boolean | Forces focused styling. | | htmlReadOnly? | boolean | Sets native readOnly without replacing the input. | | hideValue? | boolean | Masks the input using a password field. | | defaultExpand? | boolean | Automatically expands the textarea to fit its contents. | | resize? | 'none' \| 'vertical' \| 'horizontal' \| 'both' | Allowed textarea resize directions. | | hideMaxLength? | boolean | Hides the multiline character counter. | | inputStyle? | Record<string, string \| number> | Inline styles for the input. | | enabledOverflowY? | boolean | Allows vertical scrolling when the textarea expands. | | value? | string \| number \| readonly string[] | Controlled value. | | defaultValue? | string \| number \| readonly string[] | Initial value when uncontrolled. | | onChange? | ChangeEventHandler<HTMLInputElement> | Called when the value changes. | | disabled? | boolean | Disables interaction. | | placeholder? | string | Placeholder text. | | type? | HTMLInputTypeAttribute | Native input or button type. | | maxLength? | number | Maximum text length. |

SearchInput

Controlled search input with a clear action.

| Prop | Type | Description | | -------------- | -------------------------------------------- | --------------------------------------------------------------------- | | onClear? | () => void | Called when the clear button is clicked; the parent must reset value. | | iconClear? | ReactNode | Custom clear icon. | | value | string | Controlled value. | | onChange | (e: ChangeEvent<HTMLInputElement>) => void | Receives the native change event; update value in the parent. | | disabled? | boolean | Disables interaction. | | placeholder? | string | Placeholder text. |

InputNumber

Formatted numeric input with limits and rounding.

| Prop | Type | Description | | ----------------------------- | ------------------------------------------------ | ----------------------------------------------------------------------- | | label? | string | Input label. | | error? | boolean | Shows error styling. | | helperTextProps? | Partial<HelperTextProps> | Additional props for the helper text. | | aiLoading? | boolean | Disables editing and displays the translated AI processing text. | | showBorderOnBlur? | boolean | Keeps the border visible while unfocused. | | helperText? | string \| null | Text displayed below the input. | | color? | 'warning' \| 'success' \| 'error' | Helper text/status color: warning, success, or error. | | fullWidth? | boolean | Fills the available width. | | startAdornment? | ReactNode \| (() => ReactNode) | Content before the input. | | endAdornment? | ReactNode \| (() => ReactNode) | Content after the input. | | inputClassName? | string | Additional CSS classes for the input. | | multipleLine? | boolean | Renders a textarea instead of a single-line input. | | rows? | number | Visible textarea row count. | | readOnly? | boolean | Renders the value as non-editable display content. | | isFocused? | boolean | Forces focused styling. | | htmlReadOnly? | boolean | Sets native readOnly without replacing the input. | | hideValue? | boolean | Masks the input using a password field. | | defaultExpand? | boolean | Automatically expands the textarea to fit its contents. | | resize? | 'none' \| 'vertical' \| 'horizontal' \| 'both' | Allowed textarea resize directions. | | hideMaxLength? | boolean | Hides the multiline character counter. | | inputStyle? | Record<string, string \| number> | Inline styles for the input. | | enabledOverflowY? | boolean | Allows vertical scrolling when the textarea expands. | | format? | string | Number formatting pattern. | | min? | number | Minimum permitted number. | | max? | number | Maximum permitted number. | | step? | number | Increment/decrement step. | | value? | number \| null | Controlled value. | | defaultValue? | number \| null | Initial value when uncontrolled. | | onChange? | (value: number \| null) => void | Receives the parsed number or null for an empty value. | | fillMissingZero? | boolean | Pads missing fractional zeros according to the format. | | numberOfIntegerDigit? | number | Maximum integer digit count. | | numberOfDecimalDigit? | number | Maximum fractional digit count. | | showIncreaseDecreaseButton? | boolean | Shows increment and decrement controls. | | roundRule? | 'round' \| 'round_up' \| 'round_down' \| null | Rounding strategy applied to decimal values. | | precision? | number | Decimal precision used by roundRule, capped by numberOfDecimalDigit. | | allowTypeOutsideRange? | boolean | Allows typed values outside the configured range; false clamps on blur. | | selectOnFocus? | boolean | Selects the input text on focus. | | textAlign? | 'left' \| 'center' \| 'right' | Alignment of the number text. | | disabled? | boolean | Disables interaction. | | placeholder? | string | Placeholder text. | | maxLength? | number | Maximum text length. |

NumberRangeInput

Two numeric inputs for a lower and upper bound.

| Prop | Type | Description | | ------------------------ | ---------------------------------------- | ----------------------------------------------------------------------- | | value | NumberRangeInputValue | Controlled value. | | onChange | (value: NumberRangeInputValue) => void | Called when the value changes. | | format? | string | Number formatting pattern. | | renderValue? | (value: number \| null) => string | Custom rendering of the displayed value. | | fullWidth? | boolean | Fills the available width. | | color? | 'warning' \| 'success' \| 'error' | Helper text/status color: warning, success, or error. | | error? | boolean | Shows error styling. | | helperText? | string | Text displayed below the input. | | className? | string | Additional root CSS classes. | | showBorderOnBlur? | boolean | Keeps the border visible while unfocused. | | fromMax? | number | Maximum lower-bound value. | | fromMin? | number | Minimum lower-bound value. | | toMax? | number | Maximum upper-bound value. | | toMin? | number | Minimum upper-bound value. | | dataTestId? | string | Root test identifier. | | onBlur? | () => void | Called when focus leaves the control. | | getFromRef? | (ref: HTMLInputElement) => void | Receives the lower-bound input element. | | getToRef? | (ref: HTMLInputElement) => void | Receives the upper-bound input element. | | numberOfDecimalDigit? | number | Maximum fractional digit count. | | step? | number | Increment/decrement step. | | allowTypeOutsideRange? | boolean | Allows typed values outside the configured range; false clamps on blur. | | autoSwap? | boolean | Swaps the bounds on blur when the lower bound exceeds the upper bound. | | disabled? | boolean | Disables interaction. | | readOnly? | boolean | Disables editing of the numeric bounds. | | placeholder? | string | Placeholder text. |

InputGroup

Places a Select beside child input content.

| Prop | Type | Description | | ------------------- | ---------------- | -------------------------------------------------- | | groupSelectProps | SelectProps<T> | Props passed to the leading Select. | | fullWidth? | boolean | Fills the available width. | | groupSelectWidth? | number | Width of the leading Select in pixels. | | children? | ReactNode | Input content displayed beside the leading Select. |

Select

Single-selection dropdown with optional search and grouped options.

| Prop | Type | Description | | ---------------------- | ------------------------------------------------------------ | ------------------------------------------------------------------------ | | label? | string | Input label. | | error? | boolean | Shows error styling. | | helperTextProps? | Partial<HelperTextProps> | Additional props for the helper text. | | aiLoading? | boolean | Disables editing and displays the translated AI processing text. | | showBorderOnBlur? | boolean | Keeps the border visible while unfocused. | | helperText? | string \| null | Text displayed below the input. | | color? | 'warning' \| 'success' \| 'error' | Helper text/status color: warning, success, or error. | | fullWidth? | boolean | Fills the available width. | | startAdornment? | ReactNode \| (() => ReactNode) | Content before the input. | | endAdornment? | ReactNode \| (() => ReactNode) | Content after the input. | | inputClassName? | string | Additional CSS classes for the input. | | multipleLine? | boolean | Renders a textarea instead of a single-line input. | | rows? | number | Visible textarea row count. | | readOnly? | boolean | Renders the value as non-editable display content. | | isFocused? | boolean | Forces focused styling. | | htmlReadOnly? | boolean | Sets native readOnly without replacing the input. | | hideValue? | boolean | Masks the input using a password field. | | defaultExpand? | boolean | Automatically expands the textarea to fit its contents. | | resize? | 'none' \| 'vertical' \| 'horizontal' \| 'both' | Allowed textarea resize directions. | | hideMaxLength? | boolean | Hides the multiline character counter. | | inputStyle? | Record<string, string \| number> | Inline styles for the input. | | enabledOverflowY? | boolean | Allows vertical scrolling when the textarea expands. | | value | T \| null | Controlled value. | | showOperatorSelect? | boolean | Shows the operator selector. | | height? | number \| string | Height of the input control. | | operator? | string | Selected operator value. | | operatorOptions? | SelectOperatorOption[] | Available operators with labels and icons. | | onChangeOperator? | (operator: string) => void | Called when the operator changes. | | showMoreText? | ReactNode | Footer content after the option list. | | options? | T[] | Available options. | | groupOptions? | SelectGroupOption<T>[] | Grouped options used in group mode. | | mode? | 'default' \| 'group' | Flat or grouped option layout. | | onChange | (value: T \| null) => void | Receives the selected option or null after clearing. | | name? | string | Input/group name. | | searchable? | boolean | Allows typing to search options. | | showCheckIcon? | boolean | Shows checkmarks on selected options. | | showTooltip? | boolean | Enables option tooltips. | | showValueTooltip? | boolean | Shows a tooltip for the selected value. | | clearable? | boolean | Shows a clear action. | | appendToBody? | boolean | Renders the dropdown under document.body. | | disabledValues? | Array<SelectValue> | Identifiers of options that cannot be selected. | | isEqual? | (value1: SelectValue, value2: SelectValue) => boolean | Compares option identifiers. | | onInputChange? | (e: ChangeEvent<HTMLInputElement>) => void | Called when the search text changes. | | onScrollToBottom? | (args: Waypoint.CallbackArgs) => void | Called when the bottom waypoint enters view. | | filterBySearch? | boolean | Applies local search filtering. | | customFilter? | (option: T, searchTerm: string) => boolean | Custom local option matching function. | | noOptionText? | ReactNode | Content displayed when there are no matching options. | | renderOption? | (option: T, index: number, selected: boolean) => ReactNode | Custom option renderer. | | renderValue? | (option: T) => ReactNode | Custom rendering of the displayed value. | | getLabel? | (option: T) => string \| null \| undefined | Returns the display/search label for an option. | | getValue? | (option: T) => SelectValue | Returns the identifier used to compare options. | | onBlur? | () => void | Called when focus leaves the control. | | inputRef? | RefObject<HTMLInputElement> | Ref for the inner input. | | optionListClassName? | string | Additional CSS classes for the option list. | | disabledKeyboard? | boolean | Disables dropdown keyboard navigation. | | popperProps? | Partial<PopperProps> | Additional Popper configuration. | | hidePopperOnClear? | boolean | Closes the dropdown after clearing. | | minWidthPopper? | string | Dropdown minimum width as a numeric pixel string; empty leaves it unset. | | hidePopperOnSelect? | boolean | Closes the dropdown after selecting an option. | | data-testid? | string | Root test identifier. | | getKey? | (option: SelectValue) => Key | Returns the React key for an option identifier. | | showArrowIcon? | boolean | Shows the dropdown arrow. | | renderStartAction? | ReactNode | Content before the option list. | | renderEndAction? | ReactNode | Content after the option list. | | alwaysShowAdornment? | boolean | Keeps the leading adornment visible after selection. | | defaultValue? | string \| number \| readonly string[] | Initial value when uncontrolled. | | disabled? | boolean | Disables interaction. | | placeholder? | string | Placeholder text. | | maxLength? | number | Maximum text length. |

MultipleSelect

Multi-selection dropdown with selected tags and optional search.

| Prop | Type | Description | | ------------------------------- | ----------------------------------------------------------------------- | --------------------------------------------------------------------------------------------------- | | value | T[] | Controlled value. | | autoFocus? | boolean | Focuses the input when mounted. | | openPopperOnAutoFocus? | boolean | Opens the option list when autofocus runs. | | showOperatorSelect? | boolean | Shows the operator selector. | | operator? | string | Selected operator value. | | optionListLoading? | boolean | Shows loading feedback in the option list. | | loading? | boolean | Shows a spinner in the input while keeping the selected values and clear action; defaults to false. | | operatorOptions? | SelectOperatorOption[] | Available operators with labels and icons. | | hasSelectAll? | boolean | Shows the select-all option. | | onChangeOperator? | (operator: string) => void | Called when the operator changes. | | onChange | (data: T[]) => void | Called when the value changes. | | onInputChange? | (e: ChangeEvent<HTMLInputElement>) => void | Called when the search text changes. | | alsoClearDisabledValues? | boolean | Includes disabled selections when clearing all values. | | ignoreOption? | (option: T) => boolean | Excludes options for which this predicate returns true. | | options | T[] | Available options. | | showMoreText? | ReactNode | Footer content after the option list. | | showTooltip? | boolean | Enables option tooltips. | | tooltipOfDisabledOption? | (option: T) => ReactNode | Tooltip content for a disabled option. | | tabIndex? | number | Keyboard focus order. | | getLabel | (option: T) => ReactNode | Returns the display/search label for an option. | | clearable? | boolean | Shows a clear action. | | noOptionText? | ReactNode | Content displayed when there are no matching options. | | getValue | (option: T) => MultipleSelectValue | Returns the identifier used to compare options. | | filterBySearch? | boolean | Applies local search filtering. | | customFilter? | (option: T, searchTerm: string) => boolean | Custom local option matching function. | | tagVariant? | 'contained' \| 'outlined' \| 'gray' | Visual style of selected tags. | | appendToBody? | boolean | Renders the dropdown under document.body. | | disabledValues? | Array<MultipleSelectValue> \| ((option: T) => boolean) | Option values or predicate that disable selection. | | showBorderOnBlur? | boolean | Keeps the border visible while unfocused. | | singleSelect? | boolean | Limits selection to one option while retaining an array value. | | maxSelectedValue? | number | Maximum number of selectable values. | | onScrollToBottom? | (args: Waypoint.CallbackArgs) => void | Called when the bottom waypoint enters view. | | renderOption? | (option: T, state: MultipleSelectOptionRenderState) => ReactNode | Custom option renderer. | | renderOptionsHeader? | ReactNode | Content above the options. | | renderLimitValue? | (option: T) => ReactNode | Custom renderer for values in the overflow popup. | | renderTag? | (params: RenderTagParams<T>) => ReactNode | Custom selected-tag renderer. | | getOptionWidth? | (option: T) => number | Estimates a selected tag width in pixels for overflow layout. | | isEqual? | (value1: MultipleSelectValue, value2: MultipleSelectValue) => boolean | Compares option identifiers. | | hideShowMoreTextWhenNoOption? | boolean | Hides the show-more footer when no options remain. | | hideAfterSelect? | boolean | Closes the option list after selecting. | | keepTagsSingleLine? | boolean | Collapses excess tags while the list is open to keep the input height stable. | | disabled? | boolean | Disables interaction. | | fullWidth? | boolean | Fills the available width. | | searchable? | boolean | Allows typing to search options. | | changeOnBlur? | boolean | Defers selection changes until focus leaves the control. | | onBlur? | () => void | Called when focus leaves the control. | | onHideList? | () => void | Called when the option list closes. | | error? | boolean | Shows error styling. | | helperText? | string \| null | Text displayed below the input. | | color? | 'warning' \| 'success' \| 'error' | Helper text/status color: warning, success, or error. | | renderLimitTag? | (tailNumber: number) => ReactNode | Custom renderer for the hidden-tag count. | | placeholder? | string | Placeholder text. | | inputPlaceholder? | string | Placeholder for the dropdown search input. | | data-testid? | string | Root test identifier. | | showCheckbox? | boolean | Shows checkboxes beside options. | | showCheckIcon? | boolean | Shows checkmarks on selected options. | | name? | string | Input/group name. | | className? | string | Additional root CSS classes. | | optionListClassName? | string | Additional CSS classes for the option list. | | optionItemClassName? | string \| ((option: T) => string) | Additional option wrapper classes, optionally computed per option. | | optionContentClassName? | string \| ((option: T) => string) | Additional option content classes, optionally computed per option. | | disableOptionItemStateStyles? | boolean | Disables built-in selected, focused, and disabled option state styling. | | popperProps? | Partial<PopperProps> | Additional Popper configuration. | | readOnly? | boolean | Prevents editing and opening the option list. | | minWidthPopper? | string | Dropdown minimum width as a numeric pixel string; empty leaves it unset. | | ableFullWidth? | boolean | Declared in the public type; currently not used by the component. | | getKey? | (option: MultipleSelectValue) => Key | Returns the React key for an option identifier. | | isShowIconSearch? | boolean | Shows the search icon. | | renderEndAction? | ReactNode | Content after the option list. | | startAdornment? | ReactNode \| (() => ReactNode) | Content before the input. | | renderWhenNoOption? | ReactNode | Declared in the public type; currently not used; use noOptionText instead. | | searchValue? | string | Externally controlled search text; pair with onInputChange. | | alwaysShowAdornment? | boolean | Keeps the leading adornment visible after selection. | | valueTooltip? | (option: T) => ReactNode \| string | Tooltip content for a selected tag. |

Checkbox

Checkbox with checked and indeterminate states.

| Prop | Type | Description | | ---------------- | -------------------------------------- | ------------------------------- | | indeterminate? | boolean | Shows the mixed checkbox state. | | size? | 'large' \| 'medium' \| 'small' | Component size. | | value? | number \| string \| boolean | Controlled value. | | checked? | boolean | Controlled checked state. | | onChange? | ChangeEventHandler<HTMLInputElement> | Called when the value changes. | | disabled? | boolean | Disables interaction. | | name? | string | Input/group name. |

CheckboxGroup

Controls the selected values of child checkboxes.

| Prop | Type | Description | | ------------ | -------------------------------------------------------- | --------------------------------------------------------------------------- | | name? | string | Input/group name. | | value | T[] | Controlled value. | | onChange | (e: ChangeEvent<HTMLInputElement>, value: T[]) => void | Called when the value changes. | | row? | boolean | Uses horizontal instead of vertical layout. | | disabled? | boolean | Disables interaction. | | className? | string | Additional root CSS classes. | | children? | ReactNode | Child inputs whose checked state and callbacks are controlled by the group. |

Radio

Radio input with size variants.

| Prop | Type | Description | | ----------- | -------------------------------------- | ------------------------------ | | size? | 'large' \| 'medium' \| 'small' | Component size. | | value? | number \| string \| boolean | Controlled value. | | checked? | boolean | Controlled checked state. | | onChange? | ChangeEventHandler<HTMLInputElement> | Called when the value changes. | | disabled? | boolean | Disables interaction. | | name? | string | Input/group name. |

RadioGroup

Controls the selected value of child radio inputs.

| Prop | Type | Description | | ------------ | ------------------------------------------------------ | --------------------------------------------------------------------------- | | name? | string | Input/group name. | | value | T \| null | Controlled value. | | onChange | (e: ChangeEvent<HTMLInputElement>, value: T) => void | Called when the value changes. | | row? | boolean | Uses horizontal instead of vertical layout. | | disabled? | boolean | Disables interaction. | | className? | string | Additional root CSS classes. | | children? | ReactNode | Child inputs whose checked state and callbacks are controlled by the group. |

Switch

Accessible on/off switch.

| Prop | Type | Description | | ----------- | --------------------------------------- | ------------------------------ | | size? | 'large' \| 'medium' | Component size. | | checked? | boolean | Controlled checked state. | | onChange? | ChangeEventHandler<HTMLInputElement> | Called when the value changes. | | disabled? | boolean | Disables interaction. | | name? | string | Input/group name. | | value? | string \| number \| readonly string[] | Native submitted input value. |

FormControlLabel

Pairs a Checkbox, Radio or Switch with a clickable label. Clicking the label toggles the control once; do not wrap controls in a native <label>, since Switch already forwards its own clicks.

<FormControlLabel
    label="Đang tải dữ liệu"
    control={<Switch checked={loading} onChange={(event) => setLoading(event.target.checked)} />}
/>

| Prop | Type | Description | | ----------------- | ---------------------------------------- | --------------------------------------------------------------------------------------- | | control | ReactNode | The control element; it receives the generated id and the disabled state. | | label? | ReactNode | Label content. | | labelPlacement? | 'top' \| 'left' \| 'right' \| 'bottom' | Label position; defaults to right. | | labelAlign? | 'left' \| 'right' \| 'center' | Label alignment; left placement uses a fixed 140px label width. | | disabled? | boolean | Disables the control and styles the label; defaults to the control's own disabled prop. | | disabledLabel? | boolean | Applies the disabled label color when disabled; defaults to true. | | usingHtmlFor? | boolean | Links the label to the control with htmlFor; defaults to true. | | className? | string | Additional CSS classes for the container. | | classNameLabel? | string | Additional CSS classes for the label. |

TagsInput

Editable tag list with optional suggested values.

| Prop | Type | Description | | --------------------------------- | ------------------------------------------------ | --------------------------------------------------------------------------------- | | value? | TagsInputValue<T>[] | Controlled value. | | onChange? | (value: TagsInputValue<T>[]) => void | Called when the value changes. | | fullWidth? | boolean | Fills the available width. | | error? | boolean | Shows error styling. | | helpText? | string | Text displayed below the tag input. | | color? | 'warning' \| 'success' \| 'error' | Helper text/status color: warning, success, or error. | | defaultValue? | TagsInputValue<T>[] | Initial value when uncontrolled. | | tagVariants? | 'contained' \| 'outlined' \| 'gray' | Visual style of rendered tags. | | tagProps? | TagProps | Additional props passed to each Tag. | | tagLimitRounded? | boolean | Declared in the public type; currently not used by the component. | | wrapperClassName? | string | Additional classes for the tag/input wrapper. | | isChangeOverlap? | boolean | Allows duplicate values and emits getValue results; false deduplicates tags. | | submitWithStringValue? | boolean | Allows committing typed text; false accepts suggested options only. | | getInputRef? | (ref: HTMLInputElement) => void | Receives the inner input element. | | getLabel? | (value: TagsInputValue<T>) => string | Returns the display/search label for an option. | | getValue? | (value: TagsInputValue<T>) => string | Returns the identifier used to compare options. | | getOptionWidth? | (value: TagsInputValue<T>) => number | Estimates a selected tag width in pixels for overflow layout. | | renderTag? | `(params: RenderTagInputParams) =