react-fatless-form
Version:
A lightweight React form package designed for simplicity that simplifies form handling and validation without unnecessary complexity or bloat.
78 lines (77 loc) • 2.79 kB
TypeScript
import React from 'react';
export type SelectInputType = {
name: string;
type: "select";
options: {
label: string;
value: string | number;
}[];
style?: React.CSSProperties;
onChange: (value: string | number | (string | number)[]) => void;
value: string | number | (string | number)[];
multiple?: boolean;
placeholder?: string;
className?: string;
label?: string;
disabled?: boolean;
loading?: boolean;
error?: string;
};
/**
* A customizable dropdown select component with support for single and multiple selection.
*
* This component provides features such as:
* - Single or multiple selection
* - Searchable options
* - "Select All" and "Clear All" actions for multiple selection mode
* - Initial value handling
* - Responsive dropdown behavior
*
* @param {SelectInputProps & {
* onChange: (value: string | number | (string | number)[]) => void;
* value?: string | number | (string | number)[];
* }} props - The properties for the SelectBox component.
*
* @property {Array<{label: string; value: string | number}>} options - The list of options for the dropdown. Each option should have a `label` for display and a `value` for identification.
* @property {boolean} [multiple=false] - Determines whether multiple selections are allowed.
* @property {(value: string | number | (string | number)[]) => void} onChange - Callback invoked when the selected value(s) change.
* @property {string} [placeholder="Select..."] - Placeholder text displayed when no options are selected.
* @property {string} [className] - Custom class names for styling the control.
* @property {React.CSSProperties} [style] - Inline styles for the control.
* @property {string | number | (string | number)[]} [value=[]] - Initial selected value(s). Can be a single value or an array of values.
*
* @returns {JSX.Element} The SelectBox component.
*
* @example
* // Single select usage
* <SelectBox
* options={[
* { label: "Option 1", value: 1 },
* { label: "Option 2", value: 2 }
* ]}
* onChange={(value) => console.log(value)}
* />
*
* @example
* // Multiple select usage with initial values
* <SelectBox
* options={[
* { label: "Option 1", value: 1 },
* { label: "Option 2", value: 2 },
* { label: "Option 3", value: 3 }
* ]}
* multiple
* value={[1, 3]}
* onChange={(values) => console.log(values)}
* />
*
* @example
* // Styling the component
* <SelectBox
* options={[{ label: "Styled Option", value: 1 }]}
* className="custom-select"
* style={{ border: "1px solid red" }}
* onChange={(value) => console.log(value)}
* />
*/
export declare function SelectBox({ options, multiple, onChange, placeholder, className, style, value, label, error, }: SelectInputType): React.JSX.Element;