Skip to content

UI: Add a file input control #84181

Open
Open

Description

@ciampo

Follow-up to #66403 and the discussion about adding a file control to the UI package.

What problem does this address?

The discussion in #66403 recommended adding a component for handling files to @wordpress/ui, rather than extending FormFileUpload in @wordpress/components. A reusable file input would give consumers a consistent way to select local files using the WordPress Design System.

There is no immediate need identified in that discussion, so this is a low-priority addition.

What is your proposed solution?

Add a file input type control to @wordpress/ui, styled with the design system's tokens. It should open the native file picker, let consumers access the selected files, and support native file input options such as accept, multiple, and disabled, with an accessible label and keyboard operation.

Use Base UI's Input as the upstream reference. The shadcn/ui Base UI file input example, which uses type="file", is the concrete counterpart cited in the original discussion.

Keep the initial scope focused on file selection. Drag-and-drop support, DropZone composition, and Media Library integration can be considered separately when a concrete use case needs them.

Activity

  1. added
    Design SystemIssues related to the system of combining components according to best practices.
    on Oct 7, 2026
  2. ciampo commented on Oct 7, 2026

    @ciampo
    ContributorAuthor

    cc @WordPress/gutenberg-components @WordPress/gutenberg-design

  3. added
    [Priority] LowUsed to indicate that the issue at hand isn't a top priority to address and can be handled later
    on Oct 7, 2026
  4. capoomalek commented on Oct 18, 2026

    @capoomalek

    Hi! I'd like to work on this issue @ciampo .

  5. ciampo commented on Oct 20, 2026

    @ciampo
    ContributorAuthor

    @capoomalek we first need to agree on specs.

    @mirka do you think we can just tweak Input and InputControl's styles?

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Metadata

Metadata

Labels

Design SystemIssues related to the system of combining components according to best practices.[Package] UI/packages/ui[Priority] LowUsed to indicate that the issue at hand isn't a top priority to address and can be handled later[Type] EnhancementA suggestion for improvement.

Type

No type

Projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions