monday-ui-react-core/src/components/TextField/__stories__/TextField.mdx

Official monday.com UI resources for application development in React.js

import { Meta } from "@storybook/blocks";
import TextField from "../TextField";
import { ComponentRules, UsageGuidelines } from "vibe-storybook-components";
import { COMBOBOX, DROPDOWN, SEARCH } from "../../../storybook/components/related-components/component-description-map";
import * as TextFieldStories from "./TextField.stories";

<Meta of={TextFieldStories} />

# TextField

- [Overview](#overview)
- [Props](#props)
- [Usage](#usage)
- [Variants](#variants)
- [Do’s and don’ts](#dos-and-donts)
- [Use cases and examples](#use-cases-and-examples)
- [Related components](#related-components)
- [Feedback](#feedback)

## Overview

An input field includes a label and a text field users can type text into. They typically appear in forms and dialogs.

<Canvas of={TextFieldStories.Overview} />

## Props

<PropsTable />

## Usage

<UsageGuidelines
  guidelines={[
    "Always use placeholder in input field",
    "Icons can be used to message alerts as well. Pair them with error messages to provide redundant alerts.",
    "Character or word counters should be used if there is a character or word limit."
  ]}
/>

## Variants

### Sizes

There are three sizes available: Small (32px), Medium (40px) and Large (48px).

<Canvas of={TextFieldStories.Sizes} />

### States

<Canvas of={TextFieldStories.States} />

### Validation

Use validation to give feedback to the user for a case where he has provided an invalid input. The validation error should appear when the user is done typing and getting out of the input’s focus.

<code>The validation object has two status states - error, success</code>

<Canvas of={TextFieldStories.Validation} />

## Do’s and Don’ts

<ComponentRules
  rules={[
    {
      positive: {
        component: (
          <div className="monday-storybook-text-field_size">
            <TextField title="Email" placeholder="email@monday.com" size={TextField.sizes.MEDIUM} />
          </div>
        ),
        description:
          "Make sure your text field has a short, descriptive label above it that describes what the user should type into the box below."
      },
      negative: {
        component: (
          <div className="monday-storybook-text-field_size">
            <TextField
              title="What is your email address?"
              placeholder="email@monday.com"
              size={TextField.sizes.MEDIUM}
            />
          </div>
        ),
        description:
          "Avoid phrasing your labels as questions. Keep in mind that your label shouldn’t contain instructions. Reserve those for the helper text."
      }
    },
    {
      positive: {
        component: (
          <div className="monday-storybook-text-field_size">
            <TextField title="Email" placeholder="email@monday.com" size={TextField.sizes.MEDIUM} />
          </div>
        ),
        description:
          "Use the help text description to convey requirements or to show any formatting examples that would help user comprehension."
      },
      negative: {
        component: (
          <div className="monday-storybook-text-field_size">
            <TextField title="Email" placeholder="email@monday.com" size={TextField.sizes.MEDIUM} />
            For example: email@monday.com
          </div>
        ),
        description:
          "Avoid repeating the field label. If the field label provides sufficient context for completing the action, then you likely don’t need to add help text."
      }
    }
  ]}
/>

## Use cases and examples

### Text field in a form

Users can insert text.

<Canvas of={TextFieldStories.TextFieldInAForm} />

### Input field with placeholder text

<Canvas of={TextFieldStories.InputFieldWithPlaceholderText} />

### Required input field

Use the <code>requiredAsterisk</code> prop to indicate that a field is required. When set to <code>true</code>, an asterisk (\*) will appear next to the label.

<Canvas of={TextFieldStories.RequiredInputField} />

### Input field with date

<Canvas of={TextFieldStories.InputFieldWithDate} />

### Input field with datetime

<Canvas of={TextFieldStories.InputFieldWithDateAndTime} />

## Related components

<RelatedComponents componentsNames={[DROPDOWN, SEARCH, COMBOBOX]} />