# Text Field

A text input with placeholder, prefix, and suffix support.

> For the complete documentation index, see [llms.txt](/llms.txt). Markdown variants are available by appending `.md` to any URL or sending an `Accept: text/markdown` header. An agent skill is available at [/.well-known/agent-skills/site-skill.md](/.well-known/agent-skills/site-skill.md).



<ComponentPreview name="text-field/Basic" />

## Import [#import]

```rust
use maccn::MacTextField;
```

## Usage [#usage]

```rust
let state = cx.new(|cx| InputState::new(window, cx).placeholder("you@example.com"));

MacTextField::new("email", &state);
```

## Labelling [#labelling]

<ComponentPreview name="text-field/Labelled" />

```rust
use gpui::div;
use maccn::{MacLabel, MacTextField};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(MacLabel::new("field-label").child("Server:"))
    .child(MacTextField::new("field-labelled", &state).w(px(200.)))
```

## Placeholder [#placeholder]

<ComponentPreview name="text-field/Placeholder" />

```rust
use gpui::Context as _;
use gpui_base::input::InputState;
use maccn::MacTextField;

let state = cx.new(|cx| {
    InputState::new(window, cx).placeholder("you@example.com")
});

MacTextField::new("field-placeholder", &state).w(px(220.));
```

## Sizes [#sizes]

<ComponentPreview name="text-field/Sizes" />

```rust
use gpui::div;
use maccn::{MacControlSize, MacTextField};

div()
    .flex()
    .items_center()
    .gap_2()
    .child(
        MacTextField::new("field-xl", &state)
            .size(MacControlSize::ExtraLarge)
            .w(px(220.)),
    )
    .child(
        MacTextField::new("field-l", &state)
            .size(MacControlSize::Large)
            .w(px(180.)),
    )
    .child(MacTextField::new("field-r", &state).w(px(160.)))
    .child(
        MacTextField::new("field-s", &state)
            .size(MacControlSize::Small)
            .w(px(140.)),
    )
    .child(
        MacTextField::new("field-m", &state)
            .size(MacControlSize::Mini)
            .w(px(120.)),
    )
```

## Disabled [#disabled]

<ComponentPreview name="text-field/Disabled" />

```rust
MacTextField::new("field-d", &state)
    .disabled(true)
    .w(px(220.))
```

## API [#api]

### Props [#props]

| Prop       | Type             | Default   |
| ---------- | ---------------- | --------- |
| `size`     | `MacControlSize` | `Regular` |
| `disabled` | `bool`           | `false`   |

### Methods [#methods]

| Method            | Description                  |
| ----------------- | ---------------------------- |
| `pill()`          | Enables pill-shaped styling. |
| `prefix(element)` | Adds a prefix element.       |
| `suffix(element)` | Adds a suffix element.       |
| `radius(f32)`     | Sets custom corner radius.   |

### InputState [#inputstate]

`MacTextField::new(id, &state)` requires an `Entity<InputState>` created with `InputState::new(window, cx)`.