Add controlled examples to site

site/docs/components/checkbox/examples.mdx

@@ -143,5 +143,13 @@ For more information, refer to the [form pattern](/salt/patterns/forms).
 
 You can add a description to a checkbox using a `StackLayout` in the `label` prop.
 
+</LivePreview>
+
+<LivePreview componentName="checkbox" exampleName="Controlled" >
+
+## Controlled
+
+A controlled CheckboxGroup will rely on the application to manually set the value through the `checkedValues` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `checkedValues` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/dropdown/examples.mdx

@@ -180,5 +180,13 @@ To style `Dropdown` with a full border, set `bordered={true}`.
 
 We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).
 
+</LivePreview>
+
+<LivePreview componentName="dropdown" exampleName="Controlled" >
+
+## Controlled
+
+A controlled Dropdown will rely on the application to manually set the selected values through the `selected` prop. The `onSelectionChange` event should be used to read the new selected values and decide what the next values should be. This value is updated by changing the `selected` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/input/examples.mdx

@@ -120,5 +120,13 @@ To style Input with a full border, set `bordered={true}`.
 
 We recommend this styling when the field uses the same fill color as the background (i.e., a primary fill color on a primary background).
 
+</LivePreview>
+
+<LivePreview componentName="input" exampleName="Controlled" >
+
+## Controlled
+
+A controlled Input will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/list-box/examples.mdx

@@ -69,5 +69,13 @@ You can supply static content as children to the `Option` component. This can be
 - Users can benefit from seeing a particular visual with list items. Customize the display as you see fit. For example, if displaying a list of contacts, it may help to provide headshots alongside the option text.
 - Place any visual support such as icons, country symbols or avatars to the left of the option text.
 
+</LivePreview>
+
+<LivePreview componentName="list-box" exampleName="Controlled" >
+
+## Controlled
+
+A controlled List Box will rely on the application to manually set the value through the `selected` prop. The `onSelectionChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `selected` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/multiline-input/examples.mdx

@@ -128,5 +128,12 @@ If you've disabled the containing multiline input or set it to a read-only state
 
 To control the number of maximum rows visible, you can set a max height for the multiline input.
 
+</LivePreview>
+<LivePreview componentName="multiline-input" exampleName="Controlled" >
+
+## Controlled
+
+A controlled Multiline Input will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/radio-button/examples.mdx

@@ -123,5 +123,13 @@ For more information, refer to the [form field](/salt/patterns/forms) guidance.
 
 You can add a description to a checkbox using a `StackLayout` in the `label` prop.
 
+</LivePreview>
+
+<LivePreview componentName="radio-button" exampleName="Controlled" >
+
+## Controlled
+
+A controlled Radio will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/switch/examples.mdx

@@ -63,5 +63,13 @@ Use a disabled checked state for switches that have permissions, dependencies or
 
 Use a form field if you need a left aligned label, avoid also having a switch label.
 
+</LivePreview>
+
+<LivePreview componentName="switch" exampleName="Controlled" >
+
+## Controlled
+
+A controlled Switch will rely on the application to manually set the value through the `checked` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `checked` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/docs/components/toggle-button/examples.mdx

@@ -75,5 +75,13 @@ You can disable toggle buttons if required by context or user permissions. Disab
 
 By default, a toggle button group has horizontal alignment. If you can present the options in a stacked layout, orientate the group vertically using the `orientation=”vertical”` prop.
 
+</LivePreview>
+
+<LivePreview componentName="toggle-button" exampleName="Controlled" >
+
+## Controlled
+
+A controlled Toggle Button will rely on the application to manually set the value through the `value` prop. The `onChange` event should be used to read the value and decide what the next value should be. This value is updated by changing the `value` prop.
+
 </LivePreview>
 </LivePreviewControls>

site/src/examples/checkbox/Controlled.tsx

@@ -0,0 +1,22 @@
+import { Checkbox, CheckboxGroup } from "@salt-ds/core";
+import { type ChangeEvent, type ReactElement, useState } from "react";
+
+export const Controlled = (): ReactElement => {
+  const [checkedValues, setCheckedValues] = useState<string[]>([]);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    const updatedCheckedValues = checkedValues.includes(value)
+      ? checkedValues.filter((checkedValue) => checkedValue !== value)
+      : [...checkedValues, value];
+    setCheckedValues(updatedCheckedValues);
+  };
+
+  return (
+    <CheckboxGroup checkedValues={checkedValues} onChange={handleChange}>
+      <Checkbox label="Alternatives" value="alternatives" />
+      <Checkbox label="Equities" value="equities" />
+      <Checkbox label="Fixed income" value="fixed income" />
+    </CheckboxGroup>
+  );
+};

site/src/examples/checkbox/index.ts

@@ -11,3 +11,4 @@ export * from "./WrapGroup";
 export * from "./Indeterminate";
 export * from "./WithFormField";
 export * from "./WithDescription";
+export * from "./Controlled";

site/src/examples/dropdown/Controlled.tsx

@@ -0,0 +1,26 @@
+import { Dropdown, Option } from "@salt-ds/core";
+import { type ReactElement, type SyntheticEvent, useState } from "react";
+import { shortColorData } from "./exampleData";
+
+export const Controlled = (): ReactElement => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const handleSelectionChange = (
+    event: SyntheticEvent,
+    newSelected: string[],
+  ) => {
+    setSelected(newSelected);
+  };
+
+  return (
+    <Dropdown
+      selected={selected}
+      onSelectionChange={handleSelectionChange}
+      style={{ width: "256px" }}
+    >
+      {shortColorData.map((color) => (
+        <Option value={color} key={color} />
+      ))}
+    </Dropdown>
+  );
+};

site/src/examples/dropdown/index.ts

@@ -14,3 +14,4 @@ export * from "./WithFormField";
 export * from "./ObjectValues";
 export * from "./SelectAll";
 export * from "./Bordered";
+export * from "./Controlled";

site/src/examples/input/Controlled.tsx

@@ -0,0 +1,15 @@
+import { Input } from "@salt-ds/core";
+import { type ChangeEvent, type ReactElement, useState } from "react";
+
+export const Controlled = (): ReactElement => {
+  const [value, setValue] = useState<string>("Value");
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setValue(value);
+  };
+
+  return (
+    <Input value={value} onChange={handleChange} style={{ width: "256px" }} />
+  );
+};

site/src/examples/input/index.ts

@@ -11,3 +11,4 @@ export * from "./Primary";
 export * from "./TextAlignment";
 export * from "./Validation";
 export * from "./Bordered";
+export * from "./Controlled";

site/src/examples/list-box/Controlled.tsx

@@ -0,0 +1,27 @@
+import { ListBox, Option } from "@salt-ds/core";
+import { type ReactElement, type SyntheticEvent, useState } from "react";
+// refer to https://github.com/jpmorganchase/salt-ds/tree/main/site/src/examples/list-box/exampleData.ts
+import { shortColorData } from "./exampleData";
+
+export const Controlled = (): ReactElement => {
+  const [selected, setSelected] = useState<string[]>([]);
+
+  const handleSelectionChange = (
+    event: SyntheticEvent,
+    newSelected: string[],
+  ) => {
+    setSelected(newSelected);
+  };
+
+  return (
+    <ListBox
+      selected={selected}
+      onSelectionChange={handleSelectionChange}
+      style={{ width: "10em" }}
+    >
+      {shortColorData.slice(0, 5).map((color) => (
+        <Option value={color} key={color} />
+      ))}
+    </ListBox>
+  );
+};

site/src/examples/list-box/index.ts

@@ -5,3 +5,4 @@ export * from "./DisabledOption";
 export * from "./Bordered";
 export * from "./Scrolling";
 export * from "./ComplexOptions";
+export * from "./Controlled";

site/src/examples/multiline-input/Controlled.tsx

@@ -0,0 +1,19 @@
+import { MultilineInput } from "@salt-ds/core";
+import { type ChangeEvent, type ReactElement, useState } from "react";
+
+export const Controlled = (): ReactElement => {
+  const [value, setValue] = useState<string>("Value");
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const value = event.target.value;
+    setValue(value);
+  };
+
+  return (
+    <MultilineInput
+      value={value}
+      onChange={handleChange}
+      style={{ width: "256px" }}
+    />
+  );
+};

site/src/examples/multiline-input/index.ts

@@ -10,3 +10,4 @@ export * from "./Secondary";
 export * from "./StaticAdornments";
 export * from "./ValidationStatus";
 export * from "./MaxHeight";
+export * from "./Controlled";

site/src/examples/radio-button/Controlled.tsx

@@ -0,0 +1,19 @@
+import { RadioButton, RadioButtonGroup } from "@salt-ds/core";
+import { type ChangeEvent, type ReactElement, useState } from "react";
+
+export const Controlled = (): ReactElement => {
+  const [value, setValue] = useState<string>("");
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const updatedValue = event.target.value;
+    setValue(updatedValue);
+  };
+
+  return (
+    <RadioButtonGroup value={value} onChange={handleChange}>
+      <RadioButton label="NAMR" value="namr" />
+      <RadioButton label="APAC" value="apac" />
+      <RadioButton label="EMEA" value="emea" />
+    </RadioButtonGroup>
+  );
+};

site/src/examples/radio-button/index.ts

@@ -9,3 +9,4 @@ export * from "./Wrap";
 export * from "./LongText";
 export * from "./WithFormField";
 export * from "./WithDescription";
+export * from "./Controlled";

site/src/examples/switch/Controlled.tsx

@@ -0,0 +1,15 @@
+import { Switch } from "@salt-ds/core";
+import { type ChangeEvent, type ReactElement, useState } from "react";
+
+export const Controlled = (): ReactElement => {
+  const [checked, setChecked] = useState<boolean>(false);
+
+  const handleChange = (event: ChangeEvent<HTMLInputElement>) => {
+    const updatedChecked = event.target.checked;
+    setChecked(updatedChecked);
+  };
+
+  return (
+    <Switch label="Controlled" checked={checked} onChange={handleChange} />
+  );
+};

site/src/examples/switch/index.ts

@@ -3,3 +3,4 @@ export * from "./DefaultChecked";
 export * from "./DisabledChecked";
 export * from "./Disabled";
 export * from "./LeftAlignedLabel";
+export * from "./Controlled";

site/src/examples/toggle-button/Controlled.tsx

@@ -0,0 +1,29 @@
+import { ToggleButton, ToggleButtonGroup } from "@salt-ds/core";
+import { AppSwitcherIcon, FolderClosedIcon, VisibleIcon } from "@salt-ds/icons";
+import { type ReactElement, type SyntheticEvent, useState } from "react";
+
+export const Controlled = (): ReactElement => {
+  const [value, setValue] = useState<string>("");
+
+  const handleChange = (event: SyntheticEvent<HTMLButtonElement>) => {
+    const updatedValue = event.currentTarget.value;
+    setValue(updatedValue);
+  };
+
+  return (
+    <ToggleButtonGroup value={value} onChange={handleChange}>
+      <ToggleButton value="all">
+        <AppSwitcherIcon aria-hidden />
+        All
+      </ToggleButton>
+      <ToggleButton value="active">
+        <VisibleIcon aria-hidden />
+        Active
+      </ToggleButton>
+      <ToggleButton value="search">
+        <FolderClosedIcon aria-hidden />
+        Archived
+      </ToggleButton>
+    </ToggleButtonGroup>
+  );
+};

site/src/examples/toggle-button/index.ts

@@ -4,3 +4,4 @@ export * from "./ToggleButtonGroupVertical";
 export * from "./Disabled";
 export * from "./IconOnly";
 export * from "./TextOnly";
+export * from "./Controlled";