# Textfield

A form component that provide the ability to enter and edit text in a defined layout with inner element (Label, Field, Button) spacing for dynamic resizing.

[Styleguide Link](https://zpl.io/V1EdG6Q)

* Parent: Form (Container)
* Child: [Field](/core/overview/field.md), [Label](/core/overview/label.md), [FC - Leading](/core/components/form/fc-leading.md), [FC - Trailing](/core/components/form/fc-trailing.md)

## Properties

**Label** - The component can be presented with a label to give context to the form control. This label can be positioned top (above the field), left, or not at all (none).

<figure><img src="/files/Zjo9zNt4XZDQU3B4qjnc" alt=""><figcaption></figcaption></figure>

**Helper** - Does the component have helper text (On/Off). This is used to provide additional context for the component for examples, how the input will be used, or as further clarification to the label.

<figure><img src="/files/baxSY03kRmZoACnqDmtm" alt=""><figcaption></figcaption></figure>

**Button** - In certain situations there may be the need to add a button next to the field (ex. upload of a file). This property turns that button on/off.

<figure><img src="/files/yt18YNzjh4HOw0S1LavQ" alt=""><figcaption></figcaption></figure>

**Field Type** - In some situations, like in a sheets search field, we may want to invert the appearance of the field to make it stand out a little better. This property makes that possible.

## Functionality

**Single-line fields**

In single-line fields, when the cursor reaches the right edge of the field, text longer than the field input automatically scrolls left.

Single-line fields are used to collect short input values, any scrolling of text beyond the view is for usability purposes and should not be used for longer form content. For those, use either the multi-line option for a textfield or the Textarea component.

**Multi-line fields**

Multi-line text fields provide an overflow text wrap to the next line when the cursor reaches the end of the field. This causes the text field to expand (growing the field down).

A multi-line field initially shows as a single-line fields, for a compact layout.

**Note:** The structure and spacing of this component is the same between Textfield, Textarea, Selectlist, Chiplist, Slider, Userlist, and Toggle Button.

**Note:** Each of the nested elements and primitives of this form component have properties that can be adjusted to customize the component.


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://able.bucca.com/core/components/form/textfield-1.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.