# Configure a Component for Flow Screens

To use a custom Lightning web component in a flow screen, add some metadata to the component’s configuration file.

The [`componentName.js-meta.xml` file](/docs/platform/lwc/guide/reference-configuration-tags.md) defines the metadata values for the component, including the design configuration for components intended for use in flow screens.

- To make your component usable in a flow screen, add the `lightning__FlowScreen` target.
- To add input fields to your component, add `targetConfig` properties.
- To restrict a property to `inputOnly` or `outputOnly`, use the `role` attribute. For example, if a property is restricted to `outputOnly`, users can’t set its value from a Lightning record page. If you don’t specify the `role` attribute, the default value allows input and output.

See the complete list of [XML Configuration File Elements](/docs/platform/lwc/guide/reference-configuration-tags.md).

This sample component has four flow screen input fields. The `startDate` property is set to `inputOnly`. The `name` property is set to the `New Account` default value.

```xml
<?xml version="1.0" encoding="UTF-8"?>
<LightningComponentBundle xmlns="http://soap.sforce.com/2006/04/metadata">
  <apiVersion>47.0</apiVersion>
  <isExposed>true</isExposed>
  <masterLabel>Best Component Ever</masterLabel>
  <description>This is a demo component.</description>
  <targets>
    <target>lightning__FlowScreen</target>
  </targets>
  <targetConfigs>
    <targetConfig targets="lightning__FlowScreen">
      <property name="startDate" label="Start Date" type="Date" role="inputOnly" />
      <property name="account" label="Account Chosen" type="@salesforce/schema/Account" />
      <property name="annualRevenue" label="Annual Revenue" type="Integer" role="outputOnly" />
      <property name="name" label="Account Name" type="String" default="New Account" />
    </targetConfig>
  </targetConfigs>
</LightningComponentBundle>
```

The component's JavaScript file must define the default value for the `name` property to set the default value at run time.

```javascript
import { api, LightningElement } from 'lwc';
export default class BestComponentEver extends LightningElement {

    @api startDate;
    @api account;
    @api annualRevenue;
    
    @api name = 'New Account'; 
}
```

**See Also**

- [XML Configuration File Elements](/docs/platform/lwc/guide/reference-configuration-tags.md)