A multiline text input field.
import { Textarea } from "@nulogy/components";
<Textarea labelText="Label" id="textarea" />
<Textarea id="custom-size" labelText="Label" rows={2} />
<Textarea id="disabled" labelText="Label" disabled />
Please fill this out
<Textarea id="error" labelText="Label" errorMessage="Please fill this out" />
<Textarea
id="all-labels"
labelText="Label"
helpText="Additional help text"
requirementText="(Optional)"
placeholder="Placeholder"
/>
Name | Type | Default | Description |
---|---|---|---|
rows | Number | 3 | A custom number of rows to show by default. |
value | String | undefined | Value of input, used when controlling the component |
defaultValue | String | Default value of input | |
id | String | null | A unique ID for this input |
name | String | undefined | A unique name for this input |
disabled | Boolean | false | Marks the field as disabled and disallows user input |
helpText | Node | null | Placed below the label to provide assistance on how to fill out a field or the expected format. It can also provide an explanation of why the information is needed and how it will be used. |
labelText | String | null | Informs users what the corresponding input field is for. |
placeholder | String | null | A hint to the expected format for the field. Not a replacement for a label. |
required | Boolean | false | Makes the field require selection before the form will submit. |
requirementText | String | null | (Optional) or (Required). |
className | String | undefined | className passed to the wrapper element. |
onChange | Function | undefined | Change event handler that will be run whenever the value of the input is updated. |
onBlur | Function | undefined | Change event handler that will be run whenever the input loses focus. |
errorMessage | String | null | Displays an error message and applies red style |
errorList | Array of Strings | null | Displays list of error messages and applies red style |