diff --git a/apps/docs/src/components/code/Live.tsx b/apps/docs/src/components/code/Live.tsx
index 899496d4f9..929eef06a9 100644
--- a/apps/docs/src/components/code/Live.tsx
+++ b/apps/docs/src/components/code/Live.tsx
@@ -47,7 +47,7 @@ const generateScope = (hvComponents: string[], hvIcons: string[]) => {
};
export const Live = ({ children }: LiveProps) => {
- const [initialCode] = useState(children.trimEnd());
+ const [initialCode] = useState(children?.trimEnd());
const [code, setCode] = useState(initialCode);
const [isExpanded, setIsExpanded] = useState(false);
const editorTheme = useEditorTheme();
diff --git a/apps/docs/src/pages/components/color-picker.mdx b/apps/docs/src/pages/components/color-picker.mdx
new file mode 100644
index 0000000000..4686083043
--- /dev/null
+++ b/apps/docs/src/pages/components/color-picker.mdx
@@ -0,0 +1,90 @@
+import {
+ colorPickerClasses,
+ HvColorPicker,
+} from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+ const meta = await getComponentData(
+ "ColorPicker",
+ "core",
+ colorPickerClasses,
+ );
+ return { props: { ssg: { meta } } };
+};
+
+
+
+
+
+
+
+### Region customization
+
+You can configure the following Color Picker regions:
+
+- The _recommended colors_ region, via the `recommendedColors` array and `recommendedColorsPosition`;
+- The _custom colors_ picker visibility, via `showCustomColors`;
+- The _saved colors_ region, via the `showSavedColors` and `savedColorsValue` or `defaultSavedColorsValue` (uncontrolled).
+
+```tsx live
+
+```
+
+### Controlled
+
+The value of the Color Picker can be controlled via the `value`/`onChange` props.
+The value can also be read from `onChangeComplete`, for a throttled value.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+ const [color, setColor] = useState("#95AFE8");
+ const [finalColor, setFinalColor] = useState("#95AFE8");
+
+ return (
+
+
+
+ );
+}
+```
+
+### Related components
+
+- [`HvFormElement`](/components/form-element)
+
+
diff --git a/apps/docs/src/pages/components/select.mdx b/apps/docs/src/pages/components/select.mdx
index a94c1705a0..cafc2f3928 100644
--- a/apps/docs/src/pages/components/select.mdx
+++ b/apps/docs/src/pages/components/select.mdx
@@ -2,7 +2,6 @@ import {
HvOption,
HvSelect,
selectClasses,
- theme,
} from "@hitachivantara/uikit-react-core";
import Playground from "@docs/components/code/Playground";
@@ -26,9 +25,9 @@ export const getStaticProps = async ({ params }) => {
label: { type: "text", defaultValue: "Country" },
description: { type: "text", defaultValue: "Please select a country" },
multiple: { type: "check", defaultValue: false },
- required: { defaultValue: false },
- readOnly: { defaultValue: false },
- disabled: { defaultValue: false },
+ required: { type: "check", defaultValue: false },
+ readOnly: { type: "check", defaultValue: false },
+ disabled: { type: "check", defaultValue: false },
}}
componentProps={{
placeholder: "Select a value",
diff --git a/apps/docs/src/pages/components/selection-list.mdx b/apps/docs/src/pages/components/selection-list.mdx
new file mode 100644
index 0000000000..e388fd2207
--- /dev/null
+++ b/apps/docs/src/pages/components/selection-list.mdx
@@ -0,0 +1,95 @@
+import { Callout } from "nextra/components";
+import {
+ HvListItem,
+ HvSelectionList,
+ selectionListClasses,
+} from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+ const meta = await getComponentData(
+ "SelectionList",
+ "core",
+ selectionListClasses,
+ );
+ return { props: { ssg: { meta } } };
+};
+
+
+
+
+
+
+ 🥑 Avocado
+ 🍌 Banana
+ 🥕 Carrot
+ 🐉 Dragonfruit
+ 🍆 Eggplant
+
+
+
+ If you need single selection, consider using
+ [`HvRadioGroup`](/components/radio-group) or [`HvSelect`](/components/select)
+ instead.
+
+
+### Controlled
+
+The value of `HvSelectionList` can be controlled by using the `value`/`onChange`. Status is controlled via the `status` and `statusMessage` props.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+ const [value, setValue] = useState(["2"]);
+ const [status, setStatus] = useState("standBy");
+
+ return (
+ {
+ setValue(newValue);
+ setStatus(newValue?.includes("dragon") ? "invalid" : "valid");
+ }}
+ status={status}
+ statusMessage="Dragon is not a fruit!"
+ >
+ 🥑 Avocado
+ 🍌 Banana
+ 🥕 Carrot
+ 🐉 Dragon
+ 🍆 Eggplant
+
+ );
+}
+```
+
+### Related components
+
+- [`HvFormElement`](/components/form-element)
+- [`HvSelect`](/components/select)
+- [`HvListContainer`](/components/list-container)
+- [`HvRadioGroup`](/components/radio-group)
+
+
diff --git a/apps/docs/src/pages/components/switch.mdx b/apps/docs/src/pages/components/switch.mdx
new file mode 100644
index 0000000000..83369bdbc1
--- /dev/null
+++ b/apps/docs/src/pages/components/switch.mdx
@@ -0,0 +1,120 @@
+import { HvSwitch, switchClasses } from "@hitachivantara/uikit-react-core";
+
+import Playground from "@docs/components/code/Playground";
+import { Description } from "@docs/components/page/Description";
+import { Page } from "@docs/components/page/Page";
+import { getComponentData } from "@docs/utils/component";
+
+export const getStaticProps = async ({ params }) => {
+ const meta = await getComponentData("Switch", "core", switchClasses);
+ return { props: { ssg: { meta } } };
+};
+
+
+
+
+
+
+
+### Controlled
+
+The selection state can be controlled by using the `checked`/`onChange` props.
+The `value` prop represents the underlying submission value of the switch when it is checked.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+ <>
+ setChecked((prev) => !prev)}>
+ Toggle
+
+ setChecked(newChecked)}
+ />
+
The switch is {checked ? "On" : "Off"}
+
+ );
+}
+```
+
+### Custom colors
+
+You can use the `color` prop to style the color of the switch.
+
+```tsx live
+import { useState } from "react";
+
+export default function Demo() {
+ const [checked, setChecked] = useState(false);
+
+ return (
+ setChecked(newChecked)}
+ color={checked ? "positive" : "negative"}
+ />
+ );
+}
+```
+
+### Custom switch
+
+A custom switch can be built by using the underlying form components, such as `HvLabel` and `HvInfoMessage`.
+See [`HvFormElement`](/components/form-element) for more information.
+
+```tsx live
+import { useRef } from "react";
+
+export default function Demo() {
+ const inputRef = useRef(null);
+
+ return (
+