intro

FileInput

A standardized file input component for file uploads.

FileInput

The FileInput component provides a styled, native <input type="file"> for the COBOGÓ design system. Following the Curva & Concreto doctrine, the input aligns visually with TextInput, using sharp geometry for the file selector button and the wrapper.

Basic File Input

Upload Resume function helper($$renderer) { $$renderer.push(`<p>PDF or DOCX, max 5MB.</p>`); }

Validation State

Upload Profile Picture function error($$renderer) { $$renderer.push(`<p>The selected file is too large. Max 2MB.</p>`); }

Multiple Files

Upload Documents

Sizes

Small Input

Medium Input

Large Input

Disabled State

Archive Upload function helper($$renderer) { $$renderer.push(`<p>Uploads are currently disabled for this record.</p>`); }

Usage

The FileInput is designed to be composed within a FormField component. It automatically inherits the id, aria-describedby for error/helper linking, and invalid state via context.

<script>
  import { FormField, FileInput } from 'cobogo';
</script>

<FormField id="avatar-upload" label="Upload Avatar">
  <FileInput accept="image/png, image/jpeg" />
  {#snippet helper()}
    <p>Please upload a square image (PNG or JPG).</p>
  {/snippet}
</FormField>

Props

Prop	Type	Default	Description
`accept`	`string`	`undefined`	A comma-separated list of allowed file extensions or MIME types.
`multiple`	`boolean`	`false`	If true, allows the user to select multiple files.
`disabled`	`boolean`	`false`	Disables the file input.
`invalid`	`boolean`	`false`	Forces the invalid (error) state. Usually inherited from `FormField`.
`size`	`'sm' \| 'md' \| 'lg'`	`'md'`	The size variant of the file input.
`...rest`	`any`	-	Standard HTML input attributes are forwarded to the input element.

Variants

Sizes

The FileInput component supports three sizes: sm, md, and lg.

<FileInput size="sm" />
<FileInput size="md" />
<FileInput size="lg" />

Invalid State

The invalid state provides clear visual feedback using the system’s var(--vermelho) tokens. The error state maps the background color to var(--vermelho-soft) and changes the borders and focus outlines to var(--vermelho).

<FormField id="doc-upload" label="Upload Document" invalid>
  <FileInput />
  {#snippet error()}
    <p>The uploaded file is corrupted. Please try again.</p>
  {/snippet}
</FormField>

Accessibility

The component wraps the native HTML5 <input type="file">, ensuring built-in screen reader support.
When composed within a FormField, it inherits aria-describedby to automatically link the input to helper text and error messages.
Clear :focus-visible outlines ensure proper keyboard navigation visibility.
It respects prefers-reduced-motion for interaction animations.