# MozInputFolder
`moz-input-folder` is a reusable component that provides the ability to browse and pick a folder from the file system. It displays the path and icon of the selected folder to the user. It can also be configured to display custom text if needed.
```html story
e.stopPropagation()}>
```
## Usage guidelines
### When to use
* Use `moz-input-folder` when you want to allow a user to select a directory.
### When not to use
* When users need to select individual files rather than folders.
## Code
The source for `moz-input-folder` can be found under [toolkit/content/widgets/moz-input-folder/](https://searchfox.org/firefox-main/source/toolkit/content/widgets/moz-input-folder)
## How to use `moz-input-folder`
### Importing the element
Like other custom elements, you should usually be able to rely on `moz-input-folder` getting lazy loaded at the time of first use.
See [this documentation](https://firefox-source-docs.mozilla.org/browser/components/storybook/docs/README.reusable-widgets.stories.html#using-new-design-system-components) for more information on using design system custom elements.
### Setting the `label`
Providing a label for the moz-input-folder component is crucial for usability and accessibility:
* Helps users understand the purpose of the folder picker.
* Improves accessibility by ensuring screen readers can announce the function of the input.
To set a label, use the `label` attribute. In general, the label should be controlled by Fluent.
```html
```
```html story
e.stopPropagation()}>
```
### Setting the `description`
In order to set a description, use the `description` attribute.
In general, the description should be controlled by Fluent. This is the the preferred way of setting descriptions since it ensures consistency across instances of `moz-input-folder`.
```html
```
```html story
e.stopPropagation()}>
```
However, `moz-input-folder` does support a `slot` element if your use case is more complex.
```html
A more complex description
```
```html story
e.stopPropagation()}>
A more complex description
```
### Setting the `value`
The `value` attribute of `moz-input-folder` sets the initial folder path displayed in the input field. When a new folder is selected, the `value` gets updated with that folder's path.
```html
```
```html story
e.stopPropagation()}>
```
### Setting the `displayValue`
Use `displayValue` property to display something other than a folder path in the input element. Listen to the `moz-input-folder` `change` event to set a `displayValue` after the new folder was selected. The `folder` property represents the selected folder in the file system (`nsIFile` object). You can use properties of the `folder` when setting a `displayValue` (e.g., `folder.path`, `folder.displayName` or `folder.leafName`).
```html
```
```js
// Code example
let mozInputFolder = document.querySelector("moz-input-folder");
mozInputFolder.addEventListener(
"change",
() => {
mozInputFolder.displayValue = mozInputFolder.folder.displayName;
}
);
```
```html story
e.stopPropagation()}>
```
### Setting the `disabled` state
In order to disable the `moz-input-folder`, add `disabled=""` or `disabled` to the markup with no value.
```html
```
```html story
e.stopPropagation()}>
```
### Setting the `accesskey`
`accesskey` defines an keyboard shortcut for the input.
```html
```
```html story
e.stopPropagation()}>
```
### Adding additional actions
The `actions` slot can be used in cases where we need to support additional buttons beyond the built-in folder picker button, or other interactive content.
```html
More actions
```
```html story
e.stopPropagation()}>
More actions
```
### Fluent usage
The `label`, `description`, `placeholder` and `accesskey` attributes of `moz-input-folder` will generally be provided via [Fluent attributes](https://mozilla-l10n.github.io/localizer-documentation/tools/fluent/basic_syntax.html#attributes).
The relevant `data-l10n-attrs` are set automatically, so to get things working you just need to supply a `data-l10n-id` as you would with any other element.
For example, the following Fluent messages:
```
moz-input-folder-label =
.label = Save files to
moz-input-folder-placeholder =
.label = Save files to
.placeholder = Select folder
moz-input-folder-description =
.label = Save files to
.description = Description text
.placeholder = Select folder
moz-input-folder-with-accesskey =
.label = Save files to
.accesskey = v
```
would be used to set text and attributes on the different `moz-input-folder` elements as follows:
```html
```