---
updatedAt: 2025-09-23T00:00:06.000Z
agentTools:
projectIndex: https://docs.budibase.com/llms.txt
---
# Populate form fields on select
Auto-filling a form for a chosen record
## Try it out!
{`
`}
## Scenario
Have a [Form block](https://docs.budibase.com/docs/form-block) that displays some fields for a table record, you want the End User to be able to select a record from an [Options picker](https://docs.budibase.com/docs/option-picker) and update the form fields with the correct information.
[App state](https://docs.budibase.com/docs/app-state) will be used to allow communication between our search field, and the details form.
{`
Challenge: ★★☆☆☆
`}
***
## Steps
1. `Add component`: **Form**
2. `Add component`: **Data Provider**
3. In the Settings Panel, select the 'Employees' table
4. Untick *Paginate*
5. `Add component`: **Options Picker**
6. In the Settings Panel, type in a *Field* name and *Label*
7. Check *Autocomplete*
8. Select 'Data provider' as the *Options source*
9. Select 'Email' as the *Label column* and '\_id' as the *Value column*
10. In the **Data** section, right-click the 'Employees' row you want to be the Default Value. Click `Copy row _id`.
11. Back to the **Design** section, paste the row **\_id** you copied into the *Default value* setting of the **Options Picker**
12. Click the button beside *On change*. `Add Action`: **Update State**
1. *Set value* 'SelectedEmployee' to `{{ Field Value }}`
2. Be sure to `Save`
13. Click on the **Screen** component (root level of the Component Tree). `Add component`: **Form Block**
14. In the Settings Panel, set *Type* to 'View', and *Table* to 'Employees'
15. Set *Row ID* to `{{ State.SelectedEmployee }}`
***
## App export
*Downloads may take a few seconds.*
{`
`}