TextField: React

A TextField is an interactive control used in forms to collect data from the user in a single-line text field.

OverviewReactSwiftKotlin

Installation

Before you can start using the @mediahuis/chameleon-react component, you’ll need to install it, for more information check: Getting started for developers.

With that done, you’re now ready to implement the component in your application.

import { TextField } from '@mediahuis/chameleon-react';

export default function Example() {
  return <TextField id="textfield-1" label="TextField Example" />;
}

Properties

Property	Type	Default	Required	Description
accessibilityLabelClearButton	String	'Clear'	No	The a11y label for the clearButton.
action	ReactNode	-	No	Contents displayed within the ActionLabel.
className	String	-	No	Allows extending the class names of the component.
clearButton	Boolean	-	No	Show or hide clearButton.
disabled	Boolean	-	No	Sets the HTML disabled attribute.
error	Boolean	-	No	Visually displayed as error text. Adds necessary accessibility tags.
iconLeft	SVGType	-	No	Name of the icon on the left (extends Icon), choose one of the icons package.
iconLeftComponent	ReactNode	-	No	iconLeftComponent replaces iconLeft, you can add any component here.
iconRight	SVGType	-	No	Name of the icon on the right (extends Icon), choose one of the icons package.
iconRightComponent	ReactNode	-	No	iconRightComponent replaces iconRight, you can add any component here.
id	String	-	Yes	Native HTML id attribute. Also affects label-id and message-id for accessibility reasons.
label	ReactNode	-	Yes	Contents displayed within the PrimaryLabel.
labelHidden	Boolean	-	No	Visually hide the label. (label is still required for a11y)
labelProps	GenericComponentPropsWithoutAs	{}	No	Props passed to the label component.
mask	String	-	No	Helps the user with the input by ensuring a predefined format. This can be useful for dates, numerics, phone numbers, etc.
message	String	-	No	Contents displayed beneath the input.
name	String	-	No	Name of the form element.
onBlur	FocusEventHandler	-	No	Fires when the TextField loses focus.
onChange	ChangeEventHandler	-	No	Will trigger when the TextField's value changes.
onFocus	FocusEventHandler	-	No	Fires when the TextField receives focus.
optionalLabel	String	-	No	Contents displayed within the OptionalLabel.
placeholder	String	-	No
success	Boolean	-	No	TextField is successfully filled in.
type	String	'text'	No	The type of the input.
value	String | Number	-	No	The value of the input.
style	StyleProps	-	No

Mask

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:

• 9: numeric
• a: alphabetical
• *: alphanumeric

This example shows a controlled input with a mask. Note that we use defaultValue instead of value here.

() => {
  const [value, setValue] = useState('');

  const onChange = event => {
    setValue(event.target.value);
  };

  return (
    <>
      <div>Input value: {value}</div>
      <TextField
        id="optional-label"
        label="Enter your billing details"
        mask="BE99 9999 9999 9999"
        defaultValue="BE"
        onChange={onChange}
      />
    </>
  );
};

required

Chameleon form inputs are required by default, with the required attribute automatically set. To mark a field as optional, pass the optionalLabel prop to remove the required attribute.

• Installation
• Properties
  • Mask
  • required