Actions and forms

FileUpload

Native file picker with drag-and-drop selection and limits.

Live example

AttachmentsChoose files or drag them herePNG, JPG, or PDF. Up to 5 MB each.

Usage

Each example includes the complete adapter-specific parameter reference. Copy it as a starting point, then remove options your use case does not need.

React

import { FileUpload } from "@cofob/design-system-react";

/**
 * Complete FileUpload parameter reference.
 * @param files/defaultFiles
 *   type: readonly File[]; controlled or initial selection
 *   default: []
 *   example: {filesOrdefaultFiles}
 * @param label
 *   type: string | renderable content
 *   required
 *   example: "Accessible label"
 * @param name
 *   type: string
 *   default: —
 *   example: "Ada Lovelace"
 * @param accept
 *   type: native file accept string
 *   default: —
 *   example: {accept}
 * @param multiple
 *   type: boolean
 *   default: false
 *   example: true
 * @param disabled
 *   type: boolean
 *   default: false
 *   example: {disabled}
 * @param required
 *   type: boolean
 *   default: false
 *   example: true
 * @param maxFiles
 *   type: number
 *   default: —
 *   example: {maxFiles}
 * @param maxSize
 *   type: number (bytes)
 *   default: —
 *   example: {maxSize}
 * @param prompt
 *   type: string
 *   default: "Choose files or drag them here"
 *   example: "$"
 * @param hint
 *   type: adapter-specific
 *   default: —
 *   example: {hint}
 * @param removeLabel
 *   type: (file: File) => string
 *   default: —
 *   example: "Accessible label"
 * @param onFilesChange
 *   type: (files: readonly File[]) => void
 *   default: —
 *   example: {handleFilesChange}
 * @param root/input attributes
 *   type: native element attributes
 *   default: —
 *   example: class / style / aria-* / data-*
 */
export function FileUploadExample() {
  return (
    <FileUpload label="Attachments" multiple />
  );
}

Svelte

<script lang="ts">
  import { FileUpload } from "@cofob/design-system-svelte";

  // Complete FileUpload parameter reference.
  // files/defaultFiles
  //   type: readonly File[]; controlled or initial selection
  //   default: []
  //   example: {filesOrdefaultFiles}
  // label
  //   type: string | renderable content
  //   required
  //   example: "Accessible label"
  // name
  //   type: string
  //   default: —
  //   example: "Ada Lovelace"
  // accept
  //   type: native file accept string
  //   default: —
  //   example: {accept}
  // multiple
  //   type: boolean
  //   default: false
  //   example: true
  // disabled
  //   type: boolean
  //   default: false
  //   example: {disabled}
  // required
  //   type: boolean
  //   default: false
  //   example: true
  // maxFiles
  //   type: number
  //   default: —
  //   example: {maxFiles}
  // maxSize
  //   type: number (bytes)
  //   default: —
  //   example: {maxSize}
  // prompt
  //   type: string
  //   default: "Choose files or drag them here"
  //   example: "$"
  // hint
  //   type: adapter-specific
  //   default: —
  //   example: {hint}
  // removeLabel
  //   type: (file: File) => string
  //   default: —
  //   example: "Accessible label"
  // onFilesChange
  //   type: (files: readonly File[]) => void
  //   default: —
  //   example: {handleFilesChange}
  // root/input attributes
  //   type: native element attributes
  //   default: —
  //   example: class / style / aria-* / data-*
</script>

<FileUpload label="Attachments" multiple bind:files />

HTML

<!--
  Complete FileUpload parameter reference.
  files/defaultFiles
    type: readonly File[]; controlled or initial selection
    default: []
    example: {filesOrdefaultFiles}
  label
    type: string | renderable content
    required
    example: "Accessible label"
  name
    type: string
    default: —
    example: "Ada Lovelace"
  accept
    type: native file accept string
    default: —
    example: {accept}
  multiple
    type: boolean
    default: false
    example: true
  disabled
    type: boolean
    default: false
    example: {disabled}
  required
    type: boolean
    default: false
    example: true
  maxFiles
    type: number
    default: —
    example: {maxFiles}
  maxSize
    type: number (bytes)
    default: —
    example: {maxSize}
  prompt
    type: string
    default: "Choose files or drag them here"
    example: "$"
  hint
    type: adapter-specific
    default: —
    example: {hint}
  removeLabel
    type: (file: File) => string
    default: —
    example: "Accessible label"
  onFilesChange
    type: (files: readonly File[]) => void
    default: —
    example: {handleFilesChange}
  root/input attributes
    type: native element attributes
    default: —
    example: class / style / aria-* / data-*
-->
<label class="cf-file-upload__dropzone"><input type="file" multiple />Choose files</label>

<script type="module">
  import { initDesignSystem } from "@cofob/design-system-css";

  const designSystem = initDesignSystem(document);
  window.addEventListener("pagehide", () => designSystem.destroy(), { once: true });
</script>

Contract

CSS selector	`.cf-file-upload`
Adapters	Native · React · Svelte
Primary props	files/defaultFiles · label · name · accept · multiple · disabled · required · maxFiles · maxSize · prompt · hint · removeLabel · onFilesChange · root/input attributes
Documented states	empty · dragging · selected files · rejected · disabled
Interaction	Shared controller or native behavior
Theme	Semantic light and dark tokens

Composition

Native attributes and framework props are forwarded. Add custom classes without replacing the semantic contract.

Parameters

Adapter differences are explicit. Native element attributes are forwarded in React and Svelte and can be written directly in HTML.

Parameter	Type	Default	Adapters	Example	Description
`files/defaultFiles`	`readonly File[]; controlled or initial selection`	`[]`	React · Svelte · HTML	`{filesOrdefaultFiles}`	Controls or initializes the selected File records.
`label`required	`string \| renderable content`	`required`	React · Svelte · HTML	`"Accessible label"`	Visible or accessible name, depending on the component.
`name`	`string`	`—`	React · Svelte · HTML	`"Ada Lovelace"`	Identifies a native form field or named entity, depending on the component.
`accept`	`native file accept string`	`—`	React · Svelte · HTML	`{accept}`	Filters selectable files using native MIME types or file extensions.
`multiple`	`boolean`	`false`	React · Svelte · HTML	`true`	Allows more than one accordion item to stay open.
`disabled`	`boolean`	`false`	React · Svelte · HTML	`{disabled}`	Prevents user interaction while preserving visible context.
`required`	`boolean`	`false`	React · Svelte · HTML	`true`	Marks the label and control as required.
`maxFiles`	`number`	`—`	React · Svelte · HTML	`{maxFiles}`	Maximum number of files retained in the selection.
`maxSize`	`number (bytes)`	`—`	React · Svelte · HTML	`{maxSize}`	Rejects individual files larger than this byte count.
`prompt`	`string`	`"Choose files or drag them here"`	React · Svelte · HTML	`"$"`	Primary instruction content; terminal prompts are visual and excluded from copied command text.
`hint`	`adapter-specific`	`—`	React · Svelte · HTML	`{hint}`	Configures hint.
`removeLabel`	`(file: File) => string`	`—`	React · Svelte · HTML	`"Accessible label"`	Accessible name for a remove action; FileUpload can derive it from each file.
`onFilesChange`	`(files: readonly File[]) => void`	`—`	React · Svelte · HTML	`{handleFilesChange}`	Reports the complete accepted file selection after add or remove.
`root/input attributes`	`native element attributes`	`—`	React · Svelte · HTML	`class / style / aria-* / data-*`	Forwards native class/style, accessibility, event, and data attributes to the root element.