DatePicker can be used with the
+
+
+ Editor can be used with the
+
+
+ Screen Reader
+Form does not require any roles and attributes.
+ +Keyboard Support
+Component does not include any interactive elements.
++ Form is compatible with PrimeVue components, enabling smooth integration and functionality. Each component is linked to Form via a name property, which the form uses to create a state object for tracking values, errors and actions. +
+
+
+
+ This section demonstrates how to create a dynamic form using a custom Form component. It showcases an example where form fields are generated dynamically based on the provided configuration, allowing for flexible form structures.
+
+
+
+
+
+ + The register callback allows non-PrimeVue components to be registered within Form component. This enables custom elements to participate in the form's validation and value tracking, ensuring they work alongside PrimeVue components. +
+
+
+
+ + It can be integrated with with schema libraries such as Zod, Yup, Joi, Valibot, + Superstruct or custom validation logic is possible using resolver property, with available resolvers from @primevue/form/resolvers for each schema. +
+
+
+
+
+
+ Form uses the name property to create a state object for tracking values, errors, and actions.
+
+
+
+ The submit callback provides an object containing the form's validity, all errors, and current states. This offers access to the form values as well as validation status and any existing errors during submission.
+
+
+
+ + Form component supports flexible validation triggers, allowing validation on value updates, blur events, form mount, or submission, with options to apply this behavior globally or to specific fields via validateOnValueUpdate, + validateOnBlur, validateOnMount, and validateOnSubmit, which can also be set in PrimeVue components using formControl property. +
+
+
+
+
+
+
+
+
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue b/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue
new file mode 100644
index 000000000..17ae2186a
--- /dev/null
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormLabel.vue
@@ -0,0 +1,13 @@
+
+
+
+
+
diff --git a/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue b/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue
new file mode 100644
index 000000000..118b931bc
--- /dev/null
+++ b/apps/showcase/doc/forms/dynamic/DynamicFormMessage.vue
@@ -0,0 +1,32 @@
+
+
+
+
+
+ Form Pass Through
+Component does not apply any styling.
+
+
+
+
+ Form Theming
+
+ 
- 
+ 
InputMask can be used with the
+
+
+ InputNumber can be used with the
+
+
+ InputOtp can be used with the
+
+
+ InputText can be used with the
+
+
+ Knob can be used with the
+
+
+ Listbox can be used with the
+
+
+
+
+
+ InputText is used with the v-model property.
+
+
+
+ RadioButton can be used with the
+
+
+ Rating can be used with the
+
+
+
+
+
+ SelectButton can be used with the
+
+
+ Slider can be used with the
+
+
+ Textarea can be used with the
+
+
+ ToggleButton can be used with the
+
+
+ ToggleSwitch can be used with the
+
+
+ TreeSelect is used with the v-model property.
+
+
+
+
-
@@ -170,7 +171,7 @@
- ;
+ /**
+ * Used to pass attributes to DOM elements inside the component.
+ * @type {CheckboxGroupPassThroughOptions}
+ */
+ pt?: PassThrough;
+ /**
+ * Used to configure passthrough(pt) options of the component.
+ * @type {PassThroughOptions}
+ */
+ ptOptions?: PassThroughOptions;
+ /**
+ * When enabled, it removes component related styles in the core.
+ * @defaultValue false
+ */
+ unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in CheckboxGroup component.
+ */
+export interface CheckboxGroupSlots {
+ /**
+ * Default content slot.
+ */
+ default: () => VNode[];
+}
+
+/**
+ * Defines valid emits in CheckboxGroup component.
+ */
+export interface CheckboxGroupEmitsOptions {
+ /**
+ * Emitted when the value changes.
+ * @param {*} value - New value.
+ */
+ 'update:modelValue'(value: any): void;
+ /**
+ * Emitted when the value changes in uncontrolled mode.
+ * @param {*} value - New value.
+ */
+ 'value-change'(value: any): void;
+}
+
+export declare type CheckboxGroupEmits = EmitFn;
+
+/**
+ * **PrimeVue - CheckboxGroup**
+ *
+ * _CheckboxGroup is a component that groups multiple checkboxes, allowing users to select one or more options._
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ * --- ---
+ * 
+ *
+ * @group Component
+ *
+ */
+declare const CheckboxGroup: DefineComponent;
+
+declare module 'vue' {
+ export interface GlobalComponents {
+ CheckboxGroup: DefineComponent;
+ }
+}
+
+export default CheckboxGroup;
diff --git a/packages/primevue/src/checkboxgroup/CheckboxGroup.vue b/packages/primevue/src/checkboxgroup/CheckboxGroup.vue
new file mode 100644
index 000000000..be33e992c
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/CheckboxGroup.vue
@@ -0,0 +1,29 @@
+
+ ;
+ /**
+ * Used to pass attributes to DOM elements inside the component.
+ * @type {RadioButtonGroupPassThroughOptions}
+ */
+ pt?: PassThrough;
+ /**
+ * Used to configure passthrough(pt) options of the component.
+ * @type {PassThroughOptions}
+ */
+ ptOptions?: PassThroughOptions;
+ /**
+ * When enabled, it removes component related styles in the core.
+ * @defaultValue false
+ */
+ unstyled?: boolean;
+}
+
+/**
+ * Defines valid slots in RadioButtonGroup component.
+ */
+export interface RadioButtonGroupSlots {
+ /**
+ * Default content slot.
+ */
+ default: () => VNode[];
+}
+
+/**
+ * Defines valid emits in RadioButtonGroup component.
+ */
+export interface RadioButtonGroupEmitsOptions {
+ /**
+ * Emitted when the value changes.
+ * @param {*} value - New value.
+ */
+ 'update:modelValue'(value: any): void;
+ /**
+ * Emitted when the value changes in uncontrolled mode.
+ * @param {*} value - New value.
+ */
+ 'value-change'(value: any): void;
+}
+
+export declare type RadioButtonGroupEmits = EmitFn;
+
+/**
+ * **PrimeVue - RadioButtonGroup**
+ *
+ * _RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group._
+ *
+ * [Live Demo](https://www.primevue.org/radiobutton/)
+ * --- ---
+ * 
+ *
+ * @group Component
+ *
+ */
+declare const RadioButtonGroup: DefineComponent;
+
+declare module 'vue' {
+ export interface GlobalComponents {
+ RadioButtonGroup: DefineComponent;
+ }
+}
+
+export default RadioButtonGroup;
diff --git a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue
new file mode 100644
index 000000000..66120108b
--- /dev/null
+++ b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.vue
@@ -0,0 +1,29 @@
+
+
+
+
+
+
diff --git a/packages/primevue/src/checkboxgroup/package.json b/packages/primevue/src/checkboxgroup/package.json
new file mode 100644
index 000000000..c4971e702
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/package.json
@@ -0,0 +1,11 @@
+{
+ "main": "./CheckboxGroup.vue",
+ "module": "./CheckboxGroup.vue",
+ "types": "./CheckboxGroup.d.ts",
+ "browser": {
+ "./sfc": "./CheckboxGroup.vue"
+ },
+ "sideEffects": [
+ "*.vue"
+ ]
+}
diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts
new file mode 100644
index 000000000..408d4d0ab
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * CheckboxGroup is a component that groups multiple checkboxes, allowing users to select one or more options.
+ *
+ * [Live Demo](https://www.primevue.org/checkbox/)
+ *
+ * @module checkboxgroupstyle
+ *
+ */
+import type { BaseStyle } from '@primevue/core/base/style';
+
+export enum CheckboxGroupClasses {
+ /**
+ * Class name of the root element
+ */
+ root = 'p-checkbox-group'
+}
+
+export interface CheckboxGroupStyle extends BaseStyle {}
diff --git a/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js
new file mode 100644
index 000000000..7abe7cf72
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/style/CheckboxGroupStyle.js
@@ -0,0 +1,17 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const theme = ({ dt }) => `
+.p-checkbox-group {
+ display: inline-flex;
+}
+`;
+
+const classes = {
+ root: 'p-checkbox-group p-component'
+};
+
+export default BaseStyle.extend({
+ name: 'checkboxgroup',
+ theme,
+ classes
+});
diff --git a/packages/primevue/src/checkboxgroup/style/package.json b/packages/primevue/src/checkboxgroup/style/package.json
new file mode 100644
index 000000000..ec0af1abf
--- /dev/null
+++ b/packages/primevue/src/checkboxgroup/style/package.json
@@ -0,0 +1,6 @@
+{
+ "main": "./CheckboxGroupStyle.js",
+ "module": "./CheckboxGroupStyle.js",
+ "types": "./CheckboxGroupStyle.d.ts",
+ "sideEffects": false
+}
diff --git a/packages/primevue/src/colorpicker/BaseColorPicker.vue b/packages/primevue/src/colorpicker/BaseColorPicker.vue
index d03f9e73c..9624e5963 100644
--- a/packages/primevue/src/colorpicker/BaseColorPicker.vue
+++ b/packages/primevue/src/colorpicker/BaseColorPicker.vue
@@ -1,15 +1,11 @@
diff --git a/packages/primevue/src/password/style/PasswordStyle.js b/packages/primevue/src/password/style/PasswordStyle.js
index cfbc9d919..85ea0a144 100644
--- a/packages/primevue/src/password/style/PasswordStyle.js
+++ b/packages/primevue/src/password/style/PasswordStyle.js
@@ -86,9 +86,9 @@ const classes = {
root: ({ instance }) => [
'p-password p-component p-inputwrapper',
{
- 'p-inputwrapper-filled': instance.filled,
+ 'p-inputwrapper-filled': instance.$filled,
'p-inputwrapper-focus': instance.focused,
- 'p-password-fluid': instance.hasFluid
+ 'p-password-fluid': instance.$fluid
}
],
pcInputText: 'p-password-input',
diff --git a/packages/primevue/src/primevue.js b/packages/primevue/src/primevue.js
index d3cbf584e..d78a9be96 100644
--- a/packages/primevue/src/primevue.js
+++ b/packages/primevue/src/primevue.js
@@ -146,6 +146,12 @@ export { default as Checkbox } from './checkbox/Checkbox.vue';
export * from './checkbox/style/CheckboxStyle.js';
export { default as CheckboxStyle } from './checkbox/style/CheckboxStyle.js';
+// CheckboxGroup
+export * from './checkboxgroup/CheckboxGroup.vue';
+export { default as CheckboxGroup } from './checkboxgroup/CheckboxGroup.vue';
+export * from './checkboxgroup/style/CheckboxGroupStyle.js';
+export { default as CheckboxGroupStyle } from './checkboxgroup/style/CheckboxGroupStyle.js';
+
// Chip
export * from './chip/Chip.vue';
export { default as Chip } from './chip/Chip.vue';
@@ -548,6 +554,12 @@ export { default as RadioButton } from './radiobutton/RadioButton.vue';
export * from './radiobutton/style/RadioButtonStyle.js';
export { default as RadioButtonStyle } from './radiobutton/style/RadioButtonStyle.js';
+// RadioButtonGroup
+export * from './radiobuttongroup/RadioButtonGroup.vue';
+export { default as RadioButtonGroup } from './radiobuttongroup/RadioButtonGroup.vue';
+export * from './radiobuttongroup/style/RadioButtonGroupStyle.js';
+export { default as RadioButtonGroupStyle } from './radiobuttongroup/style/RadioButtonGroupStyle.js';
+
// Rating
export * from './rating/Rating.vue';
export { default as Rating } from './rating/Rating.vue';
diff --git a/packages/primevue/src/radiobutton/BaseRadioButton.vue b/packages/primevue/src/radiobutton/BaseRadioButton.vue
index 2e531259d..0c030dc62 100644
--- a/packages/primevue/src/radiobutton/BaseRadioButton.vue
+++ b/packages/primevue/src/radiobutton/BaseRadioButton.vue
@@ -1,30 +1,13 @@
diff --git a/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts
new file mode 100644
index 000000000..8409a048c
--- /dev/null
+++ b/packages/primevue/src/radiobuttongroup/RadioButtonGroup.d.ts
@@ -0,0 +1,160 @@
+/**
+ *
+ * RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group.
+ *
+ * [Live Demo](https://www.primevue.org/radiobutton/)
+ *
+ * @module radiobuttongroup
+ *
+ */
+import type { DefineComponent, DesignToken, EmitFn, PassThrough } from '@primevue/core';
+import type { ComponentHooks } from '@primevue/core/basecomponent';
+import type { PassThroughOptions } from 'primevue/passthrough';
+import { VNode } from 'vue';
+
+export declare type RadioButtonGroupPassThroughOptionType = RadioButtonGroupPassThroughAttributes | ((options: RadioButtonGroupPassThroughMethodOptions) => RadioButtonGroupPassThroughAttributes | string) | string | null | undefined;
+
+/**
+ * Custom passthrough(pt) option method.
+ */
+export interface RadioButtonGroupPassThroughMethodOptions {
+ /**
+ * Defines instance.
+ */
+ instance: any;
+ /**
+ * Defines valid properties.
+ */
+ props: RadioButtonGroupProps;
+ /**
+ * Defines valid attributes.
+ */
+ attrs: any;
+ /**
+ * Defines parent options.
+ */
+ parent: any;
+ /**
+ * Defines passthrough(pt) options in global config.
+ */
+ global: object | undefined;
+}
+
+/**
+ * Custom passthrough(pt) options.
+ * @see {@link RadioButtonGroupProps.pt}
+ */
+export interface RadioButtonGroupPassThroughOptions {
+ /**
+ * Used to pass attributes to the root's DOM element.
+ */
+ root?: RadioButtonGroupPassThroughOptionType;
+ /**
+ * Used to manage all lifecycle hooks.
+ * @see {@link BaseComponent.ComponentHooks}
+ */
+ hooks?: ComponentHooks;
+}
+
+/**
+ * Custom passthrough attributes for each DOM elements
+ */
+export interface RadioButtonGroupPassThroughAttributes {
+ [key: string]: any;
+}
+
+/**
+ * Defines valid properties in RadioButtonGroup component.
+ */
+export interface RadioButtonGroupProps {
+ /**
+ * Value binding of the radiobuttons.
+ */
+ modelValue?: any;
+ /**
+ * Default values of the radiobuttons in uncontrolled mode.
+ */
+ defaultValue?: any;
+ /**
+ * Name of the input elements.
+ */
+ name?: string | undefined;
+ /**
+ * When present, it specifies that the component should have invalid state style.
+ * @defaultValue false
+ */
+ invalid?: boolean | undefined;
+ /**
+ * Used to set form control options.
+ */
+ formControl?: any;
+ /**
+ * It generates scoped CSS variables using design tokens for the component.
+ */
+ dt?: DesignToken
+
+
+
+
diff --git a/packages/primevue/src/radiobuttongroup/package.json b/packages/primevue/src/radiobuttongroup/package.json
new file mode 100644
index 000000000..436c3ef18
--- /dev/null
+++ b/packages/primevue/src/radiobuttongroup/package.json
@@ -0,0 +1,11 @@
+{
+ "main": "./RadioButtonGroup.vue",
+ "module": "./RadioButtonGroup.vue",
+ "types": "./RadioButtonGroup.d.ts",
+ "browser": {
+ "./sfc": "./RadioButtonGroup.vue"
+ },
+ "sideEffects": [
+ "*.vue"
+ ]
+}
diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts
new file mode 100644
index 000000000..d5bb89ad2
--- /dev/null
+++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.d.ts
@@ -0,0 +1,19 @@
+/**
+ *
+ * RadioButtonGroup is a component that groups multiple radio buttons, allowing users to select only one option from the group.
+ *
+ * [Live Demo](https://www.primevue.org/radiobuttongroup/)
+ *
+ * @module radiobuttongroupstyle
+ *
+ */
+import type { BaseStyle } from '@primevue/core/base/style';
+
+export enum RadioButtonGroupClasses {
+ /**
+ * Class name of the root element
+ */
+ root = 'p-radiobutton-group'
+}
+
+export interface RadioButtonGroupStyle extends BaseStyle {}
diff --git a/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js
new file mode 100644
index 000000000..ef01f4ca6
--- /dev/null
+++ b/packages/primevue/src/radiobuttongroup/style/RadioButtonGroupStyle.js
@@ -0,0 +1,17 @@
+import BaseStyle from '@primevue/core/base/style';
+
+const theme = ({ dt }) => `
+.p-radiobutton-group {
+ display: inline-flex;
+}
+`;
+
+const classes = {
+ root: 'p-radiobutton-group p-component'
+};
+
+export default BaseStyle.extend({
+ name: 'radiobuttongroup',
+ theme,
+ classes
+});
diff --git a/packages/primevue/src/radiobuttongroup/style/package.json b/packages/primevue/src/radiobuttongroup/style/package.json
new file mode 100644
index 000000000..9553818fe
--- /dev/null
+++ b/packages/primevue/src/radiobuttongroup/style/package.json
@@ -0,0 +1,6 @@
+{
+ "main": "./RadioButtonGroupStyle.js",
+ "module": "./RadioButtonGroupStyle.js",
+ "types": "./RadioButtonGroupStyle.d.ts",
+ "sideEffects": false
+}
diff --git a/packages/primevue/src/rating/BaseRating.vue b/packages/primevue/src/rating/BaseRating.vue
index b2ac1890d..09e822ea5 100644
--- a/packages/primevue/src/rating/BaseRating.vue
+++ b/packages/primevue/src/rating/BaseRating.vue
@@ -1,19 +1,11 @@
diff --git a/packages/primevue/src/rating/style/RatingStyle.js b/packages/primevue/src/rating/style/RatingStyle.js
index 21497887c..5a7ced729 100644
--- a/packages/primevue/src/rating/style/RatingStyle.js
+++ b/packages/primevue/src/rating/style/RatingStyle.js
@@ -43,6 +43,10 @@ const theme = ({ dt }) => `
.p-rating-option-active .p-rating-icon {
color: ${dt('rating.icon.active.color')};
}
+
+.p-rating-icon.p-invalid { /* @todo */
+ stroke: ${dt('rating.invalid.icon.color')};
+}
`;
const classes = {
@@ -53,15 +57,25 @@ const classes = {
'p-disabled': props.disabled
}
],
- option: ({ instance, props, value }) => [
+ option: ({ instance, value }) => [
'p-rating-option',
{
- 'p-rating-option-active': value <= props.modelValue,
+ 'p-rating-option-active': value <= instance.d_value,
'p-focus-visible': value === instance.focusedOptionIndex && instance.isFocusVisibleItem
}
],
- onIcon: 'p-rating-icon p-rating-on-icon',
- offIcon: 'p-rating-icon p-rating-off-icon'
+ onIcon: ({ instance }) => [
+ 'p-rating-icon p-rating-on-icon',
+ {
+ 'p-invalid': instance.$invalid
+ }
+ ],
+ offIcon: ({ instance }) => [
+ 'p-rating-icon p-rating-off-icon',
+ {
+ 'p-invalid': instance.$invalid
+ }
+ ]
};
export default BaseStyle.extend({
diff --git a/packages/primevue/src/select/BaseSelect.vue b/packages/primevue/src/select/BaseSelect.vue
index 9d7a4c4be..4e70e4f53 100644
--- a/packages/primevue/src/select/BaseSelect.vue
+++ b/packages/primevue/src/select/BaseSelect.vue
@@ -1,12 +1,11 @@