TextField
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.
Import
import { TextField } from '@marigold/components';Appearance
Sorry! There are currently no variants and sizes available.
Props
| Property | Type | Default | Description |
|---|---|---|---|
label | ReactNode | none | The label text. If you don't want to visually display a label, provide an `aria-label` or `aria-labelledby` attribute for accessibility. |
description | ReactNode | none | A helpful text. |
errorMessage | ReactNode | none | An error message. |
error | boolean | false | If `true`, the field is considered invalid and if set the `errorMessage` is shown instead of the `description`. |
value | string | none | The value of the input field. |
disabled | boolean | false | If `true`, the input is disabled. |
required | boolean | false | If `true`, the input is required |
readOnly | boolean | false | If `true`, the input is readOnly. |
type | string | text | The type of the input field. |
onChange | function | none | A callback function that is called with the input's current value when the input `value` changes. |
width | string | number | full | Sets 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!` |
Examples
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.
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.
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.