# TextField

{% tabs %}
{% tab title="📗 參考" %}
* [ ] Sarun ⟩&#x20;
  * [ ] [TextField in SwiftUI](https://sarunw.com/posts/textfield-in-swiftui/)
  * [ ] [How to add a TextField to Alert in SwiftUI](https://sarunw.com/posts/swiftui-alert-textfield/)
* [ ] [Multiline TextField in SwiftUI](https://otbivnoe.ru/2022/07/10/Finally-Multiline-TextField-in-SwiftUI.html)
{% endtab %}

{% tab title="⭐️ 重點" %}
{% hint style="info" %}
* You create a text field with a <mark style="color:red;">**label**</mark> and a <mark style="color:red;">**binding**</mark> to a **value**.&#x20;
* If the **value** is a <mark style="color:red;">**string**</mark>, the text field **updates** this value **continuously** as the user types or otherwise edits the text in the field.&#x20;
* For <mark style="color:red;">**non-string**</mark> types, it **updates** the value when the user <mark style="color:red;">**commits**</mark> their edits, such as by pressing the <mark style="color:purple;">**Return**</mark> key.
{% endhint %}
{% endtab %}

{% tab title="🔸 定義" %}
```swift
struct TextField<Label> where Label : View
```

* [.init(\_:value:format:prompt:)](https://developer.apple.com/documentation/swiftui/textfield/init\(_:value:format:prompt:\)-7flsn) - create a text field that binds to a bound value, using a [`ParseableFormatStyle`](https://developer.apple.com/documentation/foundation/parseableformatstyle) to convert to and from this type.

```swift
init<S, F>(
    _ title: S, 
    value  : Binding<F.FormatInput>, 
    format : F, 
    prompt : Text? = nil
) where 
    S : StringProtocol, 
    F : ParseableFormatStyle, 
    F.FormatOutput == String
```
{% endtab %}

{% tab title="📘 手冊" %}
* [SwiftUI](https://developer.apple.com/documentation/swiftui) ⟩ [Views and Controls](https://developer.apple.com/documentation/swiftui/views-and-controls) ⟩ [TextField](https://developer.apple.com/documentation/swiftui/textfield)
{% endtab %}

{% tab title="🖥️ 影片" %}
{% embed url="https://youtu.be/1VtGiGdwato" %}
tundsdev ⟩ Multi-Line TextField in SwiftUI with TextEditor
{% endembed %}
{% endtab %}

{% tab title="👥  相關" %}
* [view](../view/view "mention")
* [🌀 TextField + style](textfield/styles/textfield-+-style)
* [👔 EmojiTextFieldStyle](../../master/todo/custom-types/emojitextfieldstyle)
* [🌅 對齊欄位](../data-flow/preferences/examples/same-width)
{% endtab %}
{% endtabs %}
