Input Fields for Power Apps

Add styled text input fields to your Power Apps forms. These inputs have clean designs with proper focus states and placeholder text.

When to use input fields

Use these input components when you want consistent, professional-looking form fields that go beyond the default Power Apps text input styling.

Choose your input style

Input

Clean, simple text input with placeholder text and focus state. Minimal design that works in any app.

Best for: Simple forms, search boxes, single-field inputs, and anywhere you need a clean text entry.

Settings you can customize:

• Placeholder text (hint shown when empty)
• Default value
• Border colors (normal and focused states)

Modern Input Label

Text input with an integrated label that sits on the top border. Contemporary design that's common in modern web apps.

Best for: Forms where you want visible labels without taking extra vertical space. Registration forms, settings, and data entry screens.

Settings you can customize:

• Label text (shows on the border)
• Hint text (placeholder inside)
• Default value
• Border/accent color

Implementation steps

1. Select your input style

Go to Input Fields and choose the style that fits your form design.

2. Configure the input

Click on your chosen component and use the Settings tab to:

• Set placeholder/hint text - What shows when the field is empty
• Set label text - (Modern Input Label) The field name shown on the border
• Choose colors - Match your app's color scheme

3. Copy YAML code

Switch to the YAML tab and copy the generated Power Apps code to your clipboard.

4. Paste into Power Apps

Open Power Apps Studio, right-click in the Tree view, and select "Paste code".

Connect input fields to your app

After pasting, connect inputs to your data and logic:

Get the input value

// Reference the text input's value
txtEmail.Text

// Use in a formula
If(IsBlank(txtEmail.Text), "No email", txtEmail.Text)

Save to data source

// Patch the value to your data source
Patch(
    Users,
    Defaults(Users),
    {Email: txtEmail.Text}
)

Validate input

// Check for valid email format
If(
    IsMatch(txtEmail.Text, Match.Email),
    // Valid - proceed
    SubmitForm(UserForm),
    // Invalid - show error
    Notify("Please enter a valid email", NotificationType.Error)
)

Clear input on submit

// Reset after successful save
Patch(Users, Defaults(Users), {Email: txtEmail.Text});
Reset(txtEmail)

Search functionality

// Filter gallery based on input
Filter(
    Products,
    txtSearch.Text in Name || txtSearch.Text in Description
)

Common use cases

Login/registration forms

Use Modern Input Label for username, email, and password fields with clear labels.

Search box

Use Input with placeholder "Search..." for filtering galleries or data.

Profile editing

Use Modern Input Label for user profile fields like Name, Email, Phone.

Quick data entry

Use Input for simple forms where users add single pieces of information quickly.

Settings screens

Use Modern Input Label for configuration values that need clear labels.

Best practices

• Use clear placeholders - "Enter your email" is better than "Type here"
• Match label to data - The label should exactly describe what to enter
• Provide feedback - Show validation errors near the field
• Consider tab order - Set TabIndex so users can navigate forms with keyboard
• Set appropriate widths - Inputs should be wide enough for expected content
• Use consistent styling - All inputs in a form should look the same

Troubleshooting

Input not capturing text

Check that you're referencing the correct control name (txtEmail.Text) and that the input isn't disabled.

Focus border not showing

Verify the focus border color isn't the same as the background. The border color change indicates focus state.

Placeholder not visible

Make sure the default value is empty. Placeholder only shows when there's no text in the field.

Text too small/large

Adjust the font size property in Power Apps Studio after pasting. Font properties can be modified directly.

Input value persisting across screens

Use Reset(txtInput) when navigating back to the screen, or set a default value that clears appropriately.