WUI logo

InputText

The InputText component is a fundamental UI element that allows users to enter and edit text. It is commonly used in forms, search fields, and data entry interfaces. This component ensures efficient user input handling, offering features like placeholder text, validation, and various input types.

Source@welcome-ui/input-text
OverviewProps
import * as React from 'react'
import { InputText } from '@welcome-ui/input-text'


const Example = () => {
  return <InputText name="firstName" placeholder="Welcome" />
}


export default Example

Installation

1

Run the following command:

yarn add @welcome-ui/input-text
2

Import component:

import { InputText } from '@welcome-ui/input-text'

Examples

Variants

Use warning, error, info or success properties to add a variant status on your fields. The label, hint or border color are set by magic 🪄

Disabled

Property disabled can be pass to the component or Field component

Sizes

Use size propety with option:

  • xs (24px)
  • sm (32px)
  • md (40px - default)
  • lg (48px)

Icon

Pass an icon through to decorate your InputText.

Use iconPlacement to put on left (default) or right.

Label

Use label on Field component to add an Label to your field

Required

Use required on component or Field component to add an asterix on required field

Hint

Use hint on Field component to add an Hint to your field

Clearable

Use the isClearable prop to add a cross button to remove the content (value) of the TextInput

Transparent

Pass transparent to remove background-color and border-color

HintLabel