UnionField

Editable

First variant is editable:

Live Editor

function EditableUnionField() {
	const [value, setValue] = useState("opt1");
	return (
		<UnionField
			name="test"
			label="Some label"
			value={value}
			editable
			onChange={setValue}
			className="test"
			options={["opt1", "opt2", "opt3"]}
			labels={{
				opt1: "Option A",
				opt2: "Option B",
				opt3: "Option C",
			}}
		/>
	);
}

Result

Loading...

Non Editable

Second variant is non editable:

Live Editor

function EditableUnionField() {
	const [value, setValue] = useState("opt1");
	return (
		<UnionField
			name="test"
			label="Some label"
			value={value}
			editable={false}
			onChange={setValue}
			className="test"
			options={["opt1", "opt2", "opt3"]}
			labels={{
				opt1: "Option A",
				opt2: "Option B",
				opt3: "Option C",
			}}
		/>
	);
}

Result

Loading...

Many options

Live Editor

function EditableUnionField() {
	const options = "0"
		.repeat(20)
		.split("")
		.map((v, i) => `opt${i}`);

	let labels = {};
	for (const i in options) {
		labels[`opt${i}`] = `Option ${i}`;
	}

	const [value, setValue] = useState("opt1");
	return (
		<UnionField
			name="test"
			label="Some label"
			value={value}
			onChange={setValue}
			className="test"
			editable
			options={options}
			labels={labels}
		/>
	);
}

Result

Loading...