Layr
⌘K
Ctrl K
Design Systems
AI Designer
Account
Roadmap
Sign in
Twilio Paste - file-picker
Getting started
Twilio Paste
Paste UI
Pro
Components
Account Switcher
Ai Chat Log
Alert
Alert Dialog
Anchor
Aspect Ratio
Avatar
Badge
Blockquote
Breadcrumb
Button
Button Group
Callout
Card
Chart Provider
Chat Composer
Chat Log
Checkbox
Code Block
Combobox
Corner Ornament
Data Grid
Date Picker
Description List
Detail Text
Disclosure
Display Heading
Display Pill Group
Editable Code Block
Example Text
File Picker
File Uploader
Flex
Form Layout
Form Pill Group
Grid
Heading
Help Text
Icon
In Page Navigation
Inline Code
Input
Keyboard Key
Label
List
Media Object
Menu
Meter
Minimizable Dialog
Modal
Multiselect Combobox
Page Header
Pagination
Paragraph
Popover
Product Switcher
Progress Bar
Progress Steps
Radio Button Group
Radio Group
Screen Reader Only
Select
Separator
Side Modal
Side Panel
Sidebar
Sidebar Navigation
Skeleton Loader
Slider
Spinner
Stack
Status Badge
Status Menu
Summary Detail
Switch
Table
Tabs
Textarea
Time Picker
Timeline
Toast
Tooltip
Topbar
Truncate
User Dialog
Visual Picker
Choose file </button> </div> <div id="default-help-text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Select a file to upload </div> </div> </div> <!-- Guidelines --> <h2>Guidelines</h2> <h3>About File Picker</h3> <p>Use a File Picker when users need to upload a document in a form flow. The File Picker allows any type of file by default, but the desired file type can be specified using the <code>accept</code> prop. This is a native HTML file picker, <code><input type="file" /></code>, so there's currently no drag-and-drop or multiple attachments functionality. <a href="https://developer.mozilla.org/en-US/docs/Web/HTML/Element/input/file" target="_blank" class="link">Read more about the native file picker on MDN.</a> The input is hidden visually, but still appears in the DOM, so that we're able to apply custom styles in an accessible way.</p> <h3>Accessibility</h3> <ul class="accessibility-list"> <li>Include a visible <a href="/components/label" class="link">Label</a> on <strong>all</strong> form fields.</li> <li>Each label must use the <code>htmlFor</code> prop that equals the <code>id</code> of the associated input.</li> <li>Provide clear identification of required fields in the label or at the start of a form. If you use the required field indicator, include the form key at the start of the form. <ul style="margin-top: 8px;"> <li>Use the <code>required</code> prop to programatically indicate they are required to browsers.</li> </ul> </li> <li>Include inline error text with the error icon on any field that errors to make it visually clear that the field changed. You can also use <a href="/components/help-text#error-help-text" class="link">the "error" variant of Help Text</a>.</li> <li>If the File Picker has associated help text or error text, include the <code>aria-describedby</code> prop on the File Picker. This should match the <code>id</code> of the help or error text.</li> </ul> <!-- Disabled Example --> <h2>Disabled File Picker</h2> <div class="example-container"> <div class="form-group"> <label for="disabled-file-picker" style="display: block; margin-bottom: 8px; font-weight: 600; color: #8891AA;">Upload a file</label> <div style="position: relative; display: inline-block;"> <input type="file" id="disabled-file-picker" disabled style="position: absolute; opacity: 0; width: 100%; height: 100%;" /> <button type="button" disabled style=" background: #F4F4F6; border: 1px solid #E1E3EA; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #8891AA; cursor: not-allowed; " > Choose file </button> </div> <div style="margin-top: 4px; font-size: 14px; color: #8891AA;"> Select a file to upload </div> </div> </div> <!-- Required Example --> <h2>Required File Picker</h2> <div class="example-container"> <div class="form-group"> <label for="required-file-picker" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;"> Upload a file <span style="color: #D61F1F;">*</span> </label> <div style="position: relative; display: inline-block;"> <input type="file" id="required-file-picker" required style="position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer;" aria-describedby="required-help-text" /> <button type="button" style=" background: #F4F4F6; border: 1px solid #8891AA; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #121C2D; cursor: pointer; transition: all 0.2s ease; " onmouseover="this.style.background='#E1E3EA'" onmouseout="this.style.background='#F4F4F6'" > Choose file </button> </div> <div id="required-help-text" style="margin-top: 4px; font-size: 14px; color: #606B85;"> Select a file to upload </div> </div> </div> <!-- Internationalization Example --> <h2>Internationalization</h2> <p>To internationalize a File Picker, simply pass the <code>i18nNoSelectionText</code> prop with the translated string. Because the <code>FilePickerButton</code> is compositional, you already pass the button text as children.</p> <div class="example-container"> <div class="form-group"> <label for="i18n-file-picker" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;">Subir un archivo</label> <div style="position: relative; display: inline-block;"> <input type="file" id="i18n-file-picker" style="position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer;" /> <button type="button" style=" background: #F4F4F6; border: 1px solid #8891AA; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #121C2D; cursor: pointer; transition: all 0.2s ease; " onmouseover="this.style.background='#E1E3EA'" onmouseout="this.style.background='#F4F4F6'" > Elegir archivo </button> </div> <div style="margin-top: 4px; font-size: 14px; color: #606B85;"> Ningún archivo seleccionado </div> </div> </div> <!-- Accessibility Callout --> <div class="callout"> <div class="callout-heading">Accessibility insight</div> <div class="callout-text"> Make sure to connect the <code>Label</code> to the <code>File Picker</code>. This is done with the <code>htmlFor</code> prop on the label, and the <code>id</code> prop on the File Picker. Those two need to match. </div> <div class="callout-text"> If the File Picker has any associated help text, it should also use the <code>aria-describedby</code> prop that equals the <code>id</code> of the help text. This ensures screen readers know the help text ties directly to the File Picker. </div> </div> <!-- Error Example --> <h2>Error State</h2> <div class="example-container"> <div class="form-group"> <label for="error-file-picker" style="display: block; margin-bottom: 8px; font-weight: 600; color: #121C2D;">Profile picture</label> <div style="position: relative; display: inline-block;"> <input type="file" id="error-file-picker" accept="image/*" style="position: absolute; opacity: 0; width: 100%; height: 100%; cursor: pointer;" aria-describedby="error-help-text" /> <button type="button" style=" background: #F4F4F6; border: 1px solid #D61F1F; border-radius: 4px; padding: 8px 16px; font-size: 14px; font-weight: 600; color: #121C2D; cursor: pointer; transition: all 0.2s ease; " onmouseover="this.style.background='#E1E3EA'" onmouseout="this.style.background='#F4F4F6'" > Upload a file </button> </div> <div id="error-help-text" style="margin-top: 4px; font-size: 14px; color: #D61F1F;"> This file is not an accepted format. You can upload .png and .jpeg file formats. </div> </div> </div> <!-- Requirements Table --> <h2>Error Messages</h2> <p>Recommended phrasing for File Picker error copy:</p> <table class="requirements-table"> <thead> <tr> <th>Status</th> <th>Recommended phrasing</th> </tr> </thead> <tbody> <tr> <td>Invalid file type</td> <td>This file is not an accepted format. You can upload [x], [x] and [x] file formats.</td> </tr> <tr> <td>Exceeds file size limit</td> <td>This file size is too big. You can upload files up to [file limit].</td> </tr> <tr> <td>Network errors</td> <td>Something went wrong with the network. Check your internet connection, then try again.</td> </tr> <tr> <td>Too many uploads</td> <td>We couldn't upload so many files so quickly. Try uploading files more slowly, or try again later.</td> </tr> <tr> <td>Generic error</td> <td>Something went wrong. Try uploading your files again.</td> </tr> </tbody> </table> <h2 id="feedback">Feedback</h2> <p>Help us improve this component by providing feedback, asking questions on Slack, or updating this file on GitHub.</p> </div> <script> // Add file selection functionality document.querySelectorAll('input[type="file"]').forEach(input => { input.addEventListener('change', function(e) { const button = this.nextElementSibling; const helpText = button.nextElementSibling; if (this.files.length > 0) { const fileName = this.files[0].name; if (helpText && !this.disabled) { helpText.textContent = `Selected: ${fileName}`; } } else { if (helpText && !this.disabled) { helpText.textContent = 'Select a file to upload'; } } }); }); </script></body></html>' width="100%" height="1200" frameborder="0" sandbox="allow-scripts allow-same-origin allow-popups">