v14.0.8


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

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

NameDescription
tabMove focus on the element or outside

Created by Wonderflow Design Team for Wonderflow.

© Wonderflow 2024