Welcome UI 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
OverviewProps
import { InputText } from 'welcome-ui/InputText'


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


export default Example

Examples

Variants

Use warning, danger, or success properties to add a variant status on your input text.

Disabled

Property disabled can be pass to the component or Field component

Sizes

Use size property 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.

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