View Source TextField

Overview

Any children of the field will be used as the label.

<TextField text="first_name">
    First Name
</TextField>

You can style the label by using elements inside.

<TextField text="last_name">
    <Text fontWeight="bold" font="caption">Last Name</Text>
</TextField>

Input Configuration

Use modifiers to configure how text is input.

"search-field" do
  autocorrectDisabled(true)
  textInputAutocapitalization(.words)
  keyboardType(.webSearch)
  submitLabel(.search)
end

<TextField
    text="value"
    class="search-field"
>
    Enter Search Text
</TextField>

Formatting Values

Use the phx-focus attribute to input values such as numbers and URLs.

<VStack>
    <TextField
        text="amount"
        format="currency"
        currencyCode="usd"
        class="decimal-pad"
    >
        Enter Amount
    </TextField>

    <TextField
        text="bank_address"
        axis="vertical"
    >
        Enter Bank Address
    </TextField>
</VStack>

Secure Input

To input private text, such as a password, use <SecureField>.

Attributes

• text
• phx-focus
• currencyCode
• nameStyle
• TextFieldProtocol/axis
• TextFieldProtocol/prompt

Events

• focusEvent
• blurEvent

References