How to use @react-md/form - 10 common examples
To help you get started, we’ve selected a few @react-md/form examples, based on popular ways it is used in public projects.
Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
mlaursen / react-md / packages / documentation / components / Demos / Form / TextFieldThemeConfig.tsx View on Github 
const TextFieldThemeConfig: FC = ({
idPrefix,
children,
renderField,
disableDense,
disableRightIcon,
}) => {
const [useLeft, handleLeftChange, setLeftIcon] = useCheckboxState(false);
const [useRight, handleRightChange, setRightIcon] = useCheckboxState(false);
const [dense, handleDenseChange, setDense] = useCheckboxState(false);
const [label, handleLabelChange, setLabel] = useCheckboxState(true);
const [inline, handleInlineChange] = useCheckboxState(false);
const [readOnly, handleReadOnlyChange, setReadOnly] = useCheckboxState(false);
const [error, handleErrorChange, setError] = useCheckboxState(false);
const [disabled, handleDisabledChange] = useCheckboxState(false);
const [currentTheme, handleThemeChange] = useChoice(
"outline",
event => {
// the "unstyled" state does not support icons and a label out of the box
// and requires additional styling instead
if (event.currentTarget.value === "none") {
setLeftIcon(false);
setRightIcon(false);
setLabel(false);
} else if (!label) {
setLabel(true);
}
}
);
const isUnstyled = currentTheme === "none";
if (disabled && error) {
setError(false);const TextFieldThemeConfig: FC = ({
idPrefix,
children,
renderField,
disableDense,
disableRightIcon,
}) => {
const [useLeft, handleLeftChange, setLeftIcon] = useCheckboxState(false);
const [useRight, handleRightChange, setRightIcon] = useCheckboxState(false);
const [dense, handleDenseChange, setDense] = useCheckboxState(false);
const [label, handleLabelChange, setLabel] = useCheckboxState(true);
const [inline, handleInlineChange] = useCheckboxState(false);
const [readOnly, handleReadOnlyChange, setReadOnly] = useCheckboxState(false);
const [error, handleErrorChange, setError] = useCheckboxState(false);
const [disabled, handleDisabledChange] = useCheckboxState(false);
const [currentTheme, handleThemeChange] = useChoice(
"outline",
event => {
// the "unstyled" state does not support icons and a label out of the box
// and requires additional styling instead
if (event.currentTarget.value === "none") {
setLeftIcon(false);
setRightIcon(false);
setLabel(false);
} else if (!label) {
setLabel(true);
}const TextFieldThemeConfig: FC = ({
idPrefix,
children,
renderField,
disableDense,
disableRightIcon,
}) => {
const [useLeft, handleLeftChange, setLeftIcon] = useCheckboxState(false);
const [useRight, handleRightChange, setRightIcon] = useCheckboxState(false);
const [dense, handleDenseChange, setDense] = useCheckboxState(false);
const [label, handleLabelChange, setLabel] = useCheckboxState(true);
const [inline, handleInlineChange] = useCheckboxState(false);
const [readOnly, handleReadOnlyChange, setReadOnly] = useCheckboxState(false);
const [error, handleErrorChange, setError] = useCheckboxState(false);
const [disabled, handleDisabledChange] = useCheckboxState(false);
const [currentTheme, handleThemeChange] = useChoice(
"outline",
event => {
// the "unstyled" state does not support icons and a label out of the box
// and requires additional styling instead
if (event.currentTarget.value === "none") {
setLeftIcon(false);
setRightIcon(false);
setLabel(false);
} else if (!label) {
setLabel(true);
}
}{filteredData.map((datum, i) => {
const resultId = getResultId(suggestionsId, i);
let optionProps: ListboxOptionProps | undefined;
if (isListboxOptionProps(datum)) {
optionProps = omit(datum, [labelKey, valueKey]);
}
return (
<option selected="{false}" id="{resultId}"> handleAutoComplete(i)}
>
{getResultLabel(datum, labelKey, value)}
</option>const TextFieldTypes: FC = () => {
const [currentTheme, handleThemeChange] = useChoice(
"outline"
);
return (
<form>
<fieldset>
{themes.map(theme => (
</fieldset></form>const TextAreaExample: FC = () => {
const [resize, handleResizeChange] = useChoice("auto");
const [animate, handleAnimateChange] = useCheckboxState(true);
const [rows, handleRowChange] = useChoice("2");
const [maxRows, handleMaxRowChange, setMaxRows] = useChoice("-1");
const rowsInt = parseInt(rows, 10);
const maxRowsInt = parseInt(maxRows, 10);
if (maxRowsInt !== -1 && maxRowsInt < rowsInt) {
const i = MAX_ROWS.find(value => value >= rowsInt) || -1;
setMaxRows(`${i}`);
}
return (
(const TextAreaExample: FC = () => {
const [resize, handleResizeChange] = useChoice("auto");
const [animate, handleAnimateChange] = useCheckboxState(true);
const [rows, handleRowChange] = useChoice("2");
const [maxRows, handleMaxRowChange, setMaxRows] = useChoice("-1");
const rowsInt = parseInt(rows, 10);
const maxRowsInt = parseInt(maxRows, 10);
if (maxRowsInt !== -1 && maxRowsInt < rowsInt) {
const i = MAX_ROWS.find(value => value >= rowsInt) || -1;
setMaxRows(`${i}`);
}
return (
(const NativeSelectExample: FC = () => {
const [icon, handleIconChange, setIcon] = useCheckboxState(true);
const [size, handleSizeChange] = useChoice("4");
const [multiple, handleMultipleChange] = useCheckboxState(false);
const [optgroup, handleOptgroupChange] = useCheckboxState(false);
if (multiple && icon) {
setIcon(false);
}
return (const HandlingDuplicatedMessages: FC = ({
duplicates,
onDuplicateChange,
}) => {
const addMessage = useAddMessage();
const [key, handleKeyChange] = useChoice(ONLINE);
return (
<form> addMessage(MESSAGES[key])}>
<fieldset>
<code>MessageQueue</code>
{" duplicate behavior"}
}
>
</fieldset></form>const UpdatingMessagePriority: FC = () => {
const addMessage = useAddMessage();
const [priority, handlePriorityChange] = useChoice("next");
const queue = useQueue();
const [running, setRunning] = useState(false);
if (running && !queue.length) {
setRunning(false);
}
const exampleNextFlow = useCallback(() => {
addMessage({
messageId: "message-1",
children: "First normal message",
messagePriority: "normal",
});
addMessage({
messageId: "message-2",
children: "Second normal message",@react-md/form
This package is for creating all the different form input types.
