TextField (code)

<TextField id="textfield" label="Label" placeholder="Placeholder" />

Name	Type	Default	Required	Description
accessibilityLabelClearButton	String	'Clear'	-	The a11y label for the clearButton
action	Node	-	-	Contents displayed within the ActionLabel.
className	String	-	-	Extend classNames.
clearButton	Boolean	-	-	show or hide clearButton
disabled	Boolean	-	-	Sets the HTML disabled attribute.
error	Boolean	-	-	Visually displayed as error text. Will add the necessary accessibility tags.
iconLeft	FunctionStringNodeObject	-	-	Name of the icon on the left (extends Icon), choose one of the icons package.
iconLeftComponent	Node	-	-	iconLeftComponent replaces iconLeft, you can add any component here.
iconRight	FunctionStringNodeObject	-	-	Name of the icon on the left (extends Icon), choose one of the icons package.
iconRightComponent	Node	-	-	iconRightComponent replaces iconRight, you can add any component here.
id	String	-	true	Native HTML id attribute. Will also affect the label-id, and the message-id. For accessibility reasons.
label	Node	-	true	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	-	Visibly hide the label. (label is still required for a11y)
mask	String	-	-	Helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, ...
message	String	-	-	Contents displayed beneath the input.
name	String	-	-	Name of the form element.
onBlur	Function	-	-	Fires when the TextField loses focus.
onChange	Function	-	-	Will trigger when the TextField's value changes.
onFocus	Function	-	-	Fires when the TextField receives focus.
onIconLeftClick	Function	-	-	Click event for the iconLeft, (not for iconLeftComponent, there the click event is placed on the component itself).
onIconRightClick	Function	-	-	Click event for the iconLeft, (not for iconRightComponent, there the click event is placed on the component itself).
optionalLabel	String	-	-	Contents displayed within the OptionalLabel.
success	Boolean	-	-	TextField is successfully filled in.
type	String	'text'	-	The type of the input.
value	StringNumber	-	-	The value of the input.

System Props

flexProps

alignSelf, flex, flexBasis, flexGrow, flexShrink, order

positioningProps

position, bottom, left, right, top, zIndex

marginProps

m, mb, ml, mr, mt, mx, my

widthProps

width, maxWidth

floatProps

float

System Props

Next to the properties listed in the propstable, a collection of system props can be added to any component for further general styling and layouting purposes. These props vary per component.

To read more about the system, click here to check out its dedicated page.

default: undefined

Adds an action or extra information to your item, mostly used for links.

<TextField
  id="action"
  label="Label"
  placeholder="Placeholder"
  action={<LinkText href="#">LinkText</LinkText>}
/>

default: undefined

By default the TextField is always required. To make a TextField optional you can add the optionalLabel prop.

With Chameleon we take a specific approach where we encourage marking optional fields, not required. The majority of fields in a form are always required. Indicating that fields are required make users more fearful, it increases the risk of errors and reduces the form completion rate.

<TextField
  id="optional-label"
  label="Label"
  placeholder="Placeholder"
  optionalLabel="Optional"
/>

default: undefined

To convey an error to the user, you can set the error prop to true.

<TextField id="error" label="Label" placeholder="Placeholder" error />

default: undefined

To convey a success state to the user, you can set the success prop to true.

<TextField id="success" label="Label" placeholder="Placeholder" success />

default: undefined

Marking a TextField as disabled, will disable all interaction with the element.

<TextField id="disabled" label="Label" placeholder="Placeholder" disabled />

default: undefined

For further illustration purposes, you can provide an iconLeft.

<TextField
  id="icon-left"
  label="Label"
  placeholder="Placeholder"
  iconLeft={Search}
/>

default: undefined

To meet accessibility requirements, every TextField should have an associated label. We do support the ability to visually hide the label when the TextField's purpose is clear.

<TextField
  id="label-hidden"
  label="Label"
  labelHidden
  placeholder="Placeholder"
/>

default: undefined

Give additional information to the user.

<Box mb={5}>
  <TextField
    id="message"
    label="Label"
    placeholder="Placeholder"
    message="Multiple inputs should have space 5 between them."
  />
</Box>
<Box>
  <TextField
    id="message-1"
    label="Label"
    placeholder="Placeholder"
    message="Multiple inputs should have space 5 between them. Oh, we've got error."
    error
  />
</Box>

default: undefined

To visually aid the user with the expected format, you can use an input mask. Input masks will display a template of the expected value. The mask is built out of several definitions:

<TextField
  id="optional-label"
  label="Enter your billing details"
  mask="BE99 9999 9999 9999"
/>