Add TagsInput component

Chainlit · Jul 28, 2023 · 9f9816d · 9f9816d
1 parent da9a373
commit 9f9816d
Showing 1 changed file with 34 additions and 0 deletions.
diff --git a/src/chainlit/frontend/src/components/organisms/inputs/tagsInput.tsx b/src/chainlit/frontend/src/components/organisms/inputs/tagsInput.tsx
@@ -0,0 +1,34 @@
+import { MuiChipsInput, MuiChipsInputChip } from 'mui-chips-input';
+
+import { IInput } from 'types/Input';
+
+import InputStateHandler from './inputStateHandler';
+
+type TagsInput = {
+  placeholder?: string;
+  value?: string[];
+  onChange?: (value: MuiChipsInputChip[]) => void;
+} & IInput;
+
+export default function TagsInput({
+  description,
+  disabled,
+  hasError,
+  id,
+  label,
+  size = 'small',
+  tooltip,
+  ...rest
+}: TagsInput): JSX.Element {
+  return (
+    <InputStateHandler
+      description={description}
+      hasError={hasError}
+      id={id}
+      label={label}
+      tooltip={tooltip}
+    >
+      <MuiChipsInput {...rest} size={size} />
+    </InputStateHandler>
+  );
+}