inputs

Textfield

Text inputs enable the user to interact with and input content and data.

Features

Keyboard accessible
Can contain icons
Multiple sizes
Value format validation
Can be rendered as textarea
Themes ready

Links

Open in playground Open in Storybook View source ARIA design

Label

Text hint sample

Anatomy

import { Textfield } from "@wonderflow/react-components";

export default () => {
  return (
    <Textfield
      type="text"
      label="Filled"
      message="Text hint sample"
      defaultValue="Prefilled value"
      placeholder="Optional placeholder"
    />
  );
};

tsx

API Reference

PROPERTY

TYPE

DEFAULT

icon

enum

iconPosition

enum

right

label

string

textarea

boolean

message

string

dimension

enum

regular

readOnly

boolean

fullWidth

boolean

disabled

boolean

false

invalid

boolean

minRows

number

4

maxRows

number

6

value

string

defaultValue

string

placeholder

string

type

string

onChange

function

Accessibility

The Textfield component requires an associated label element and id to describes the field. You can use the label and id properties or add a custom external label.

Keyboard interactions

Name	Description
`tab`	Move focus on the element or outside