sean-brydonandGitHub
46d1823ccc
* add multi option input support * fix import * add multi-key-field-support
107 lines
3.0 KiB
Plaintext
107 lines
3.0 KiB
Plaintext
---
|
|
title: MultiOptionInput
|
|
---
|
|
import { MultiOptionInput } from "@calcom/ui/components/form"
|
|
import { RenderComponentWithSnippet } from "@/app/components/render"
|
|
import { Row } from "@/app/components/row"
|
|
import { StatesExample } from "./multiInputField.states"
|
|
import { PasteExample } from "./multiInputField.paste"
|
|
import { CustomizationExample } from "./multiInputField.customization"
|
|
|
|
## Overview
|
|
|
|
The MultiOptionInput component is a flexible form input that allows users to manage a list of options with features like:
|
|
- Adding and removing options
|
|
- Reordering options with move up/down buttons
|
|
- Pasting multiple options with configurable delimiters
|
|
- Minimum options requirement
|
|
- Customizable placeholders and labels
|
|
- Key-value pair mode for environment variables, configuration settings, etc.
|
|
|
|
## States
|
|
|
|
MultiOptionInput in different states: default, disabled, and with minimum options.
|
|
|
|
<StatesExample/>
|
|
|
|
## Paste Support
|
|
|
|
Demonstrates the paste functionality with different delimiters. Users can paste comma-separated values, newline-separated values, or use custom delimiters.
|
|
|
|
In key-value mode, the component can also parse key-value pairs from pasted text. For example:
|
|
- `KEY=value`
|
|
- `NODE_ENV:production`
|
|
|
|
<PasteExample/>
|
|
|
|
## Customization
|
|
|
|
Examples of different customization options like placeholders, move buttons, remove buttons, and key-value pairs.
|
|
|
|
<CustomizationExample/>
|
|
|
|
## Usage
|
|
|
|
### Standard Options
|
|
|
|
```tsx
|
|
import { MultiOptionInput } from "@calcom/ui/components/form/inputs/MultiOptionInput";
|
|
import { useForm, FormProvider } from "react-hook-form";
|
|
|
|
type FormValues = {
|
|
options: Array<{ label: string; id: string }>;
|
|
};
|
|
|
|
const MyForm = () => {
|
|
const methods = useForm<FormValues>();
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form>
|
|
<MultiOptionInput<FormValues>
|
|
fieldArrayName="options"
|
|
optionPlaceholders={["Option 1", "Option 2"]}
|
|
defaultNumberOfOptions={2}
|
|
pasteDelimiters={["\n", ","]} // Optional
|
|
showMoveButtons={true} // Optional
|
|
minOptions={1} // Optional
|
|
addOptionLabel="Add another option" // Optional
|
|
/>
|
|
</form>
|
|
</FormProvider>
|
|
);
|
|
};
|
|
```
|
|
|
|
### Key-Value Pairs
|
|
|
|
```tsx
|
|
import { MultiOptionInput } from "@calcom/ui/components/form/inputs/MultiOptionInput";
|
|
import { useForm, FormProvider } from "react-hook-form";
|
|
|
|
type FormValues = {
|
|
envVars: Array<{ label: string; value: string; id: string }>;
|
|
};
|
|
|
|
const EnvVarsForm = () => {
|
|
const methods = useForm<FormValues>();
|
|
|
|
return (
|
|
<FormProvider {...methods}>
|
|
<form>
|
|
<MultiOptionInput<FormValues>
|
|
fieldArrayName="envVars"
|
|
keyValueMode={true}
|
|
keyLabel="Environment Variable"
|
|
valueLabel="Value"
|
|
optionPlaceholders={["NODE_ENV", "PORT"]}
|
|
valuePlaceholders={["production", "3000"]}
|
|
keyValueDelimiters={[":", "="]} // Optional, defaults to [":", "="]
|
|
defaultNumberOfOptions={2}
|
|
/>
|
|
</form>
|
|
</FormProvider>
|
|
);
|
|
};
|
|
```
|