Component for input forms.

The <TextField> is a form component which allows user to enter text with a keyboard. It consists of a label, an input field and a help text. The latter also contains error messages.

It has many properties that it brings with it. You can set label for labeling the <TextField> itself, a description which behaves as help text. It is also possible to add error messages by adding the error and errorMessage prop. Another often used property is the required prop. You can also write all other HTML input properties down.

The <FieldGroup> is a component to layout the label and the fieldbase itself. On that you can use labelWidth which is a string type to set the width of the label. Because the label is set to the left side in the core theme, it has only an impact on that.



To import the component you just have to use this code below.

import { TextField } from '@marigold/components';


Sorry! There are currently no variants and sizes available.


labelReactNodenoneThe label text. If you don't want to visually display a label, provide an `aria-label` or `aria-labelledby` attribute for accessibility.
descriptionReactNodenoneA helpful text.
errorMessageReactNodenoneAn error message.
errorbooleanfalseIf `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`.
valuestringnoneThe value of the input field.
disabledbooleanfalseIf `true`, the input is disabled.
requiredbooleanfalseIf `true`, the input is required
readOnlybooleanfalseIf `true`, the input is readOnly.
typestringtextThe type of the input field.
onChangefunctionnoneA callback function that is called with the input's current value when the input `value` changes.
widthstring | numberfullSets the width of the field. You can see allowed tokens here: https://tailwindcss.com/docs/width
...-Yes you can use all regular attributes of `input!`


Simple Text Field

This is how a basic <TextField> can look like.

Disabled Text Field

If you want to implement a disabled <TextField> you have to add the disabled property.

Required Text Field

The required property adds an required icon to the label.

Text Field with an Error

The example shows how to set the error and errorMessage properties. If you fill in the field correctly, it will disappear automatically.

Something went wrong!

Not every number is a number!

Just because the input contains numbers, it is not necessarily correctly to use input[type=number]! You can also see in the example how the errorMessage behaves if a false value is written in the input and how many possibilities you have using props.

You'll find your promo code on the back of your ticket.

Use different input methods

In this example you can see different types of inputs, like email, date or telephone number.

Using with FieldGroup

This example shows how to use the <FieldGroup> together with some form components like the <TextField> and <Radio>. It is build for the Core and has only impact of that.

You'll find your promo code on the back of your ticket.