Skip to main content

TextField

Editable​

First variant is editable:

Live Editor
function EditableTextField() {
	const text = "Lorem ipsum dolor sit ".repeat(10);

	const [value, setValue] = useState(text);
	return (
		<TextField
			name="test"
			label="Some label"
			value={value}
			editable
			onChange={setValue}
			className="test"
		/>
	);
}
Result
Loading...

Non Editable​

Second variant is non editable:

Live Editor
function NonEditableTextField() {
	const text = "Lorem ipsum dolor sit ".repeat(10);

	const [value, setValue] = useState(text);
	return (
		<TextField
			name="test"
			label="Some label"
			value={value}
			editable={false}
			onChange={setValue}
			className="test"
		/>
	);
}
Result
Loading...

Scrollable​

This variant has a minimum and maximum height set to 50 and 100 pixels respectively. When the content overflows this height, the text area will become scrollable.

/* ScrollTextField.css */
.TextField.scroll {
	min-height: 50px;
	max-height: 100px;
}
Live Editor
// import "./ScrollTextField.css";

function ScrollTextField() {
	const text = "Lorem ipsum dolor sit ".repeat(10);

	const [value, setValue] = useState(text);
	return (
		<TextField
			name="test"
			label="Some label"
			value={value}
			onChange={setValue}
			className="scroll"
			editable
		/>
	);
}
Result
Loading...