File Trigger

Guidelines React

The File Trigger component is a non-visual primitive that enables accessible, stylable file selection by activating a hidden native file input when a child pressable element is triggered.

When to use

• Create custom file upload triggers that integrate seamlessly with styled components (e.g., Button, Link, or custom elements) while retaining native file dialog behavior.
• Replace default <input type="file"> when styling or layout requires full control over the visible trigger.
• Pair with DropZone for drag-and-drop experiences or standalone for click-to-select.

Common Patterns

• Button trigger: File Trigger wraps a Button with clear action text (e.g., “Choose file” or “Upload”).
• Link-style trigger: Underlined text link for inline contexts (e.g., “Attach files”).
• Combined with DropZone: Trigger serves as secondary click action alongside drag-and-drop area.
• With progress feedback: Follow trigger activation with Progress Bar or status updates.

When NOT to use

• When native <input type="file"> styling is sufficient and no custom trigger is needed.
• For non-file selection actions; use Button or Link directly.
• In contexts requiring direct file access outside native dialog (use DropZone instead).

Variants

Variant	Use Case
Single (default)	Allow selection of one file
Multiple	Allow selection of one or more files

Properties

Anatomy

Element	Description
Trigger	Visible child element (e.g., Button) that activates file selection.
Hidden Input	Native <input type="file"> managed internally; not styled or visible.

States

State	Description	Visual Indicators
Default	Default interactive state	Inherited from trigger element
Hover	Cursor over object	Inherited from trigger element
Focus	Keyboard focus (visible on Tab or arrow key navigation)	Inherited from trigger element
Active	During press/activation	Inherited from trigger element

Content Guidelines

• Use clear, action-oriented trigger text (e.g., “Choose file”, “Select files”, “Upload document”).
• Indicate multiple selection when allowed (e.g., “Choose files”).
• Include file type restrictions in supporting text if needed (e.g., “PDF or JPG up to 10MB”).
• Avoid generic labels like “Click here”; describe the action.

Accessibility

• Relies on native <input type="file"> for full browser and assistive technology support.
• Trigger element must be focusable and activatable (e.g., Button with proper roles).
• Support accept attribute for file type filtering.
• Announce selected files via associated status or live region if displayed.
• Ensure trigger has sufficient contrast and visible focus indicators.

Support standard keyboard navigation

• Tab: Focus the trigger element.
• Enter/Space: Activate file dialog.
• Native file dialog handles selection keyboard interactions.