🚧 This website is work in progress 👷
Components
Forms
Input
Published

Input

Input

Expand code

Editable Example

import { Input } from "@wfp/react";

() => {
  return (
    <Input
      helperText="Optional helperText"
      labelText="The labelText"
      name="inputname"
    >
      {`<input />`}
    </Input>
  );
};
PropDefaultDescriptionValue

labelClasses

string
–

The classes for the label

calculatedId

string
–

The the ID of the element, uses the name prop if no id is provided. Make sure it is unique on the page.

helperTextClasses

string
–

The classes for the helper element

errorClasses

string
–

The classes for the error element

errorId

string
–

The id of the error. calculatedId + '-error-msg'

errorIcon

ReactNode
–

An icon for the error element

helperText

ReactNode
–

Provide text that is used alongside the control label for additional help

labelText

ReactNode
–

Provide the text that will be read by a screen reader when visiting this control

formItemClassName

string
–

Provide a custom className that is applied directly to the underlying <textarea> node

inputWrapperClassName

string
–

Provide a custom className that is applied directly to the underlying <input> or <textarea> node

hideLabel

boolean
–

Specify whether you want the underlying label to be visually hidden

invalid

any
–

Specify whether the control is currently invalid. Either a boolean in combination with invalidText or an object( eg. { message: "Message", …otherErrorProperties }) can be passed.

invalidText

any
–

Provide the text that is displayed when the control is in an invalid state

additional

ReactNode
–

Provide the content that will be shown in addition to the label (e.g. units, currency, etc.) This content will be placed after the label

light

boolean
–

placeholder

string
–

Specify the placeholder attribute for the input

id

string
–

Provide a unique identifier for the control

name

string
–

Provide a name for the control

required

boolean
–

Specify if the control is required (sets aria-invalid as well)

disabled

boolean
–

Specify if the control is disabled (sets aria-disabled as well)

readOnly

boolean
–

If the input is read-only, the user cannot change its value but focus and tabIndex are still applied (sets aria-readonly as well)

inline

boolean
–

Renders the input as inline element for horizontal forms

addonBefore

ReactNode
–

Additional helper in front of the input, e.g. a currency symbol (sets aria-describedby as well)

addonAfter

ReactNode
–

Additional helper behind the input, e.g. a currency symbol (sets aria-describedby as well)

components

AddonBeforeAddonAfterLabelHelperTextInlineErrorMessage
–

Supports replacement components

On this page

References