tessl/npm-primereact
Comprehensive React UI component library with 118+ components for building modern web applications
—
Pending
Quality
Pending
Does it follow best practices?
Impact
Pending
No eval scenarios have been run
form-components.mddocs/
Form Components
Comprehensive form input components with validation, formatting, and accessibility support for building interactive user interfaces.
Capabilities
Button
Primary action component for user interactions with customizable appearance and behavior.
/**
* Button component for user actions
* @param props - Button configuration options
* @returns JSX element
*/
function Button(props: ButtonProps): JSX.Element;
interface ButtonProps {
/** Button label text */
label?: string;
/** Button icon (PrimeIcon class or React node) */
icon?: string | React.ReactNode;
/** Icon position relative to label */
iconPos?: 'left' | 'right' | 'top' | 'bottom';
/** Loading state with spinner */
loading?: boolean;
/** Disabled state */
disabled?: boolean;
/** Visual severity level */
severity?: 'success' | 'info' | 'warning' | 'danger' | 'help' | 'secondary' | 'contrast';
/** Button size */
size?: 'small' | 'large';
/** Display as text-only button */
text?: boolean;
/** Display as outlined button */
outlined?: boolean;
/** Display as rounded button */
rounded?: boolean;
/** Display as raised button */
raised?: boolean;
/** Click event handler */
onClick?: (e: React.MouseEvent<HTMLButtonElement>) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Passthrough options for DOM customization */
pt?: ButtonPassThroughOptions;
}
interface ButtonPassThroughOptions {
root?: object;
loadingIcon?: object;
icon?: object;
label?: object;
}Usage Examples:
import { Button } from "primereact/button";
// Basic button
<Button label="Submit" />
// Button with icon
<Button label="Save" icon="pi pi-save" />
// Loading button
<Button label="Processing..." loading />
// Severity variants
<Button label="Delete" severity="danger" />
<Button label="Cancel" severity="secondary" outlined />InputText
Text input component for single-line text entry with validation and formatting support.
/**
* Text input component
* @param props - Input configuration options
* @returns JSX element
*/
function InputText(props: InputTextProps): JSX.Element;
interface InputTextProps {
/** Current input value */
value?: string;
/** Change event handler */
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** Invalid state for validation */
invalid?: boolean;
/** Input size */
size?: 'small' | 'large';
/** HTML input type */
type?: string;
/** Maximum length */
maxLength?: number;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Passthrough options */
pt?: PassThroughOptions;
}Calendar
Date and time picker component with flexible formatting and selection modes.
/**
* Date/time picker component
* @param props - Calendar configuration options
* @returns JSX element
*/
function Calendar(props: CalendarProps): JSX.Element;
interface CalendarProps {
/** Selected date value */
value?: Date | Date[];
/** Change event handler */
onChange?: (e: CalendarChangeEvent) => void;
/** Date format pattern */
dateFormat?: string;
/** Selection mode */
selectionMode?: 'single' | 'multiple' | 'range';
/** Time selection enabled */
showTime?: boolean;
/** Time format (12/24 hour) */
hourFormat?: '12' | '24';
/** Inline calendar display */
inline?: boolean;
/** Minimum selectable date */
minDate?: Date;
/** Maximum selectable date */
maxDate?: Date;
/** Disabled dates */
disabledDates?: Date[];
/** Disabled days of week (0-6) */
disabledDays?: number[];
/** Show other months in calendar */
showOtherMonths?: boolean;
/** Allow other month selection */
selectOtherMonths?: boolean;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface CalendarChangeEvent {
originalEvent: React.SyntheticEvent;
value: Date | Date[];
}Dropdown
Select dropdown component for single value selection from a list of options.
/**
* Dropdown selection component
* @param props - Dropdown configuration options
* @returns JSX element
*/
function Dropdown<T = any>(props: DropdownProps<T>): JSX.Element;
interface DropdownProps<T = any> {
/** Selected value */
value?: T;
/** Available options */
options?: T[];
/** Property name for option value */
optionValue?: string;
/** Property name for option label */
optionLabel?: string;
/** Template function for option rendering */
itemTemplate?: (option: T) => React.ReactNode;
/** Change event handler */
onChange?: (e: DropdownChangeEvent<T>) => void;
/** Filter enabled */
filter?: boolean;
/** Filter placeholder */
filterPlaceholder?: string;
/** Show clear button */
showClear?: boolean;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface DropdownChangeEvent<T = any> {
originalEvent: React.SyntheticEvent;
value: T;
target: {
name: string;
id: string;
value: T;
};
}MultiSelect
Multiple selection component for choosing multiple values from a list of options.
/**
* Multiple selection component
* @param props - MultiSelect configuration options
* @returns JSX element
*/
function MultiSelect<T = any>(props: MultiSelectProps<T>): JSX.Element;
interface MultiSelectProps<T = any> {
/** Selected values array */
value?: T[];
/** Available options */
options?: T[];
/** Property name for option value */
optionValue?: string;
/** Property name for option label */
optionLabel?: string;
/** Change event handler */
onChange?: (e: MultiSelectChangeEvent<T>) => void;
/** Filter enabled */
filter?: boolean;
/** Select all checkbox */
selectAll?: boolean;
/** Maximum selection limit */
maxSelectedLabels?: number;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface MultiSelectChangeEvent<T = any> {
originalEvent: React.SyntheticEvent;
value: T[];
}Checkbox
Checkbox input component for boolean value selection with intermediate state support.
/**
* Checkbox input component
* @param props - Checkbox configuration options
* @returns JSX element
*/
function Checkbox(props: CheckboxProps): JSX.Element;
interface CheckboxProps {
/** Checked state */
checked?: boolean;
/** Change event handler */
onChange?: (e: CheckboxChangeEvent) => void;
/** Disabled state */
disabled?: boolean;
/** Intermediate/indeterminate state */
indeterminate?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface CheckboxChangeEvent {
originalEvent: React.SyntheticEvent;
checked: boolean;
}RadioButton
Radio button component for single selection within a group of options.
/**
* Radio button component
* @param props - RadioButton configuration options
* @returns JSX element
*/
function RadioButton(props: RadioButtonProps): JSX.Element;
interface RadioButtonProps {
/** Input identifier */
inputId?: string;
/** Field name for grouping */
name?: string;
/** Option value */
value?: any;
/** Currently selected value */
checked?: boolean;
/** Change event handler */
onChange?: (e: RadioButtonChangeEvent) => void;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface RadioButtonChangeEvent {
originalEvent: React.SyntheticEvent;
value: any;
checked: boolean;
}InputNumber
Numeric input component with formatting, validation, and increment/decrement controls.
/**
* Numeric input component
* @param props - InputNumber configuration options
* @returns JSX element
*/
function InputNumber(props: InputNumberProps): JSX.Element;
interface InputNumberProps {
/** Numeric value */
value?: number;
/** Change event handler */
onChange?: (e: InputNumberChangeEvent) => void;
/** Number format mode */
mode?: 'decimal' | 'currency';
/** Currency code for currency mode */
currency?: string;
/** Locale for formatting */
locale?: string;
/** Minimum value */
min?: number;
/** Maximum value */
max?: number;
/** Step increment */
step?: number;
/** Show increment/decrement buttons */
showButtons?: boolean;
/** Button layout */
buttonLayout?: 'stacked' | 'horizontal' | 'vertical';
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface InputNumberChangeEvent {
originalEvent: React.SyntheticEvent;
value: number;
}Password
Password input component with strength validation and toggle visibility functionality.
/**
* Password input component
* @param props - Password configuration options
* @returns JSX element
*/
function Password(props: PasswordProps): JSX.Element;
interface PasswordProps {
/** Password value */
value?: string;
/** Change event handler */
onChange?: (e: React.ChangeEvent<HTMLInputElement>) => void;
/** Show/hide toggle button */
toggleMask?: boolean;
/** Strength feedback enabled */
feedback?: boolean;
/** Custom strength prompt text */
promptLabel?: string;
/** Custom weak strength text */
weakLabel?: string;
/** Custom medium strength text */
mediumLabel?: string;
/** Custom strong strength text */
strongLabel?: string;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}AutoComplete
Autocomplete input component with search suggestions and custom filtering.
/**
* Autocomplete input component
* @param props - AutoComplete configuration options
* @returns JSX element
*/
function AutoComplete<T = any>(props: AutoCompleteProps<T>): JSX.Element;
interface AutoCompleteProps<T = any> {
/** Selected value */
value?: T;
/** Available suggestions */
suggestions?: T[];
/** Search event handler */
completeMethod?: (e: AutoCompleteCompleteEvent) => void;
/** Change event handler */
onChange?: (e: AutoCompleteChangeEvent<T>) => void;
/** Property name for option display */
field?: string;
/** Minimum characters to trigger search */
minLength?: number;
/** Search delay in milliseconds */
delay?: number;
/** Multiple selection mode */
multiple?: boolean;
/** Dropdown trigger button */
dropdown?: boolean;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface AutoCompleteCompleteEvent {
originalEvent: React.SyntheticEvent;
query: string;
}
interface AutoCompleteChangeEvent<T = any> {
originalEvent: React.SyntheticEvent;
value: T;
}InputSwitch
Toggle switch component for boolean value selection with smooth animations.
/**
* Toggle switch component
* @param props - InputSwitch configuration options
* @returns JSX element
*/
function InputSwitch(props: InputSwitchProps): JSX.Element;
interface InputSwitchProps {
/** Checked state */
checked?: boolean;
/** Change event handler */
onChange?: (e: InputSwitchChangeEvent) => void;
/** Value when checked */
trueValue?: any;
/** Value when unchecked */
falseValue?: any;
/** Disabled state */
disabled?: boolean;
/** CSS class name */
className?: string;
/** Passthrough options */
pt?: PassThroughOptions;
}
interface InputSwitchChangeEvent {
originalEvent: React.SyntheticEvent;
value: boolean;
}ColorPicker
Color selection component with various format support and overlay display.
/**
* ColorPicker component for color selection
* @param props - ColorPicker configuration options
* @returns JSX element
*/
function ColorPicker(props: ColorPickerProps): JSX.Element;
interface ColorPickerProps {
/** Current color value */
value?: string | ColorPickerRGBType | ColorPickerHSBType;
/** Change event handler */
onChange?: (e: ColorPickerChangeEvent) => void;
/** Default color when value is null */
defaultColor?: string;
/** Format to use in value binding */
format?: 'hex' | 'rgb' | 'hsb';
/** Whether to display as overlay or inline */
inline?: boolean;
/** Disabled state */
disabled?: boolean;
/** Tab index */
tabIndex?: number;
/** Component ID */
inputId?: string;
/** Auto focus on load */
autoFocus?: boolean;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Input field CSS class */
inputClassName?: string;
/** Input field inline styles */
inputStyle?: React.CSSProperties;
/** Overlay panel CSS class */
panelClassName?: string;
/** Overlay panel inline styles */
panelStyle?: React.CSSProperties;
/** Element to attach overlay */
appendTo?: 'self' | HTMLElement | (() => HTMLElement);
/** Tooltip options */
tooltip?: string;
/** Tooltip configuration */
tooltipOptions?: TooltipOptions;
/** Passthrough options for DOM customization */
pt?: ColorPickerPassThroughOptions;
}
interface ColorPickerRGBType {
r: number;
g: number;
b: number;
}
interface ColorPickerHSBType {
h: number;
s: number;
b: number;
}
interface ColorPickerChangeEvent {
originalEvent: React.SyntheticEvent;
value: string | ColorPickerRGBType | ColorPickerHSBType;
target: {
name: string;
id: string;
value: string | ColorPickerRGBType | ColorPickerHSBType;
};
}FileUpload
File upload component with drag and drop support and progress tracking.
/**
* FileUpload component for file uploads
* @param props - FileUpload configuration options
* @returns JSX element
*/
function FileUpload(props: FileUploadProps): JSX.Element;
interface FileUploadProps {
/** Name of the request parameter */
name?: string;
/** Remote URL to upload files */
url?: string;
/** File selection mode */
mode?: 'basic' | 'advanced';
/** Allow multiple file selection */
multiple?: boolean;
/** Accepted file types */
accept?: string;
/** Disable the upload functionality */
disabled?: boolean;
/** Enable automatic upload on selection */
auto?: boolean;
/** Maximum file size in bytes */
maxFileSize?: number;
/** Custom invalid file size message */
invalidFileSizeMessage?: string;
/** Custom invalid file type message */
invalidFileTypeMessage?: string;
/** Files to display initially */
files?: File[];
/** Custom upload handler */
customUpload?: boolean;
/** Progress callback */
onProgress?: (e: FileUploadProgressEvent) => void;
/** Upload callback */
onUpload?: (e: FileUploadUploadEvent) => void;
/** Error callback */
onError?: (e: FileUploadErrorEvent) => void;
/** Clear callback */
onClear?: () => void;
/** Remove callback */
onRemove?: (e: FileUploadRemoveEvent) => void;
/** Select callback */
onSelect?: (e: FileUploadSelectEvent) => void;
/** Custom upload method for customUpload mode */
uploadHandler?: (e: FileUploadHandlerEvent) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Passthrough options for DOM customization */
pt?: FileUploadPassThroughOptions;
}InputMask
Input field with formatting mask for structured data entry.
/**
* InputMask component for formatted text input
* @param props - InputMask configuration options
* @returns JSX element
*/
function InputMask(props: InputMaskProps): JSX.Element;
interface InputMaskProps {
/** Input value */
value?: string;
/** Mask format pattern */
mask?: string;
/** Placeholder character for unfilled parts */
slotChar?: string;
/** Auto clear incomplete input */
autoClear?: boolean;
/** Unmask value on model binding */
unmask?: boolean;
/** Change event handler */
onChange?: (e: InputMaskChangeEvent) => void;
/** Complete event handler */
onComplete?: (e: InputMaskCompleteEvent) => void;
/** Focus event handler */
onFocus?: (e: React.FocusEvent<HTMLInputElement>) => void;
/** Blur event handler */
onBlur?: (e: React.FocusEvent<HTMLInputElement>) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** Read-only state */
readOnly?: boolean;
/** Component size */
size?: number;
/** Passthrough options for DOM customization */
pt?: InputMaskPassThroughOptions;
}InputTextarea
Multi-line text input component with auto-resize capability.
/**
* InputTextarea component for multi-line text input
* @param props - InputTextarea configuration options
* @returns JSX element
*/
function InputTextarea(props: InputTextareaProps): JSX.Element;
interface InputTextareaProps {
/** Textarea value */
value?: string;
/** Auto resize based on content */
autoResize?: boolean;
/** Number of rows */
rows?: number;
/** Number of columns */
cols?: number;
/** Change event handler */
onChange?: (e: React.ChangeEvent<HTMLTextAreaElement>) => void;
/** Key down event handler */
onKeyDown?: (e: React.KeyboardEvent<HTMLTextAreaElement>) => void;
/** Focus event handler */
onFocus?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
/** Blur event handler */
onBlur?: (e: React.FocusEvent<HTMLTextAreaElement>) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Placeholder text */
placeholder?: string;
/** Disabled state */
disabled?: boolean;
/** Read-only state */
readOnly?: boolean;
/** Maximum length */
maxLength?: number;
/** Tooltip options */
tooltip?: string;
/** Tooltip configuration */
tooltipOptions?: TooltipOptions;
/** Passthrough options for DOM customization */
pt?: InputTextareaPassThroughOptions;
}Rating
Star rating component for collecting user feedback and ratings.
/**
* Rating component for star-based ratings
* @param props - Rating configuration options
* @returns JSX element
*/
function Rating(props: RatingProps): JSX.Element;
interface RatingProps {
/** Current rating value */
value?: number;
/** Number of stars */
stars?: number;
/** Disabled state */
disabled?: boolean;
/** Read-only state */
readOnly?: boolean;
/** Allow cancellation by clicking selected star */
cancel?: boolean;
/** Change event handler */
onChange?: (e: RatingChangeEvent) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Tooltip options */
tooltip?: string;
/** Tooltip configuration */
tooltipOptions?: TooltipOptions;
/** Passthrough options for DOM customization */
pt?: RatingPassThroughOptions;
}
interface RatingChangeEvent {
originalEvent: React.SyntheticEvent;
value: number;
}Slider
Slider component for selecting numeric values within a range.
/**
* Slider component for range selection
* @param props - Slider configuration options
* @returns JSX element
*/
function Slider(props: SliderProps): JSX.Element;
interface SliderProps {
/** Current value */
value?: number | number[];
/** Minimum value */
min?: number;
/** Maximum value */
max?: number;
/** Step factor */
step?: number;
/** Orientation of slider */
orientation?: 'horizontal' | 'vertical';
/** Enable range selection */
range?: boolean;
/** Disabled state */
disabled?: boolean;
/** Change event handler */
onChange?: (e: SliderChangeEvent) => void;
/** Slide end event handler */
onSlideEnd?: (e: SliderSlideEndEvent) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Passthrough options for DOM customization */
pt?: SliderPassThroughOptions;
}
interface SliderChangeEvent {
originalEvent: React.SyntheticEvent;
value: number | number[];
}ToggleButton
Toggle button component for binary choices with custom labels.
/**
* ToggleButton component for binary selection
* @param props - ToggleButton configuration options
* @returns JSX element
*/
function ToggleButton(props: ToggleButtonProps): JSX.Element;
interface ToggleButtonProps {
/** Checked state */
checked?: boolean;
/** Label when checked */
onLabel?: string;
/** Label when unchecked */
offLabel?: string;
/** Icon when checked */
onIcon?: string;
/** Icon when unchecked */
offIcon?: string;
/** Icon position */
iconPos?: 'left' | 'right';
/** Disabled state */
disabled?: boolean;
/** Change event handler */
onChange?: (e: ToggleButtonChangeEvent) => void;
/** CSS class name */
className?: string;
/** Inline styles */
style?: React.CSSProperties;
/** Tab index */
tabIndex?: number;
/** Tooltip options */
tooltip?: string;
/** Tooltip configuration */
tooltipOptions?: TooltipOptions;
/** Passthrough options for DOM customization */
pt?: ToggleButtonPassThroughOptions;
}
interface ToggleButtonChangeEvent {
originalEvent: React.MouseEvent<HTMLElement>;
value: boolean;
}Install with Tessl CLI
npx tessl i tessl/npm-primereact