@myntra/uikit-component-field v1.13.96

import Field from './src/field'

Field

<Field title="Name">
  <InputText value="" onChange={() => null} />
</Field>

Examples

Field Description

The <Field> component can display description for the input.

<Field
  title="Name"
  description="Enter your full name."
>
  <InputText value="" onChange={() => null} />
</Field>

Required Field

The <Field> component displays a visual indication for required fields.

<Field
  title="Name"
  required
>
  <InputText value="" onChange={() => null} />
</Field>

Error Message

The <Field> component can display error message in place of description.

<Field
  title="Email"
  error="Invalid email address!"
>
  <InputText value="" onChange={() => null} />
</Field>

We can run custom validations and provide error problematically. If error is present, it will display the error, else it will display description.

const [email, setEmail] = useState('');

<Field
  title="Email"
  description="Enter your email address."
  error={
    !email // if empty email field
    || /^[^@]+@myntra\.com$/.test(email) // or valid email value
      ? null // then no error
      : 'Invalid email address!'
  }
>
  <InputText
    type="email"
    value={email}
    onChange={setEmail}
  />
</Field>