form fields

<tc-file>

File picker with a styled button + filename label. Form-associated, supports single or multiple files.

import "@ra9/tan-compose-kit/file"

Props

Name	Type	Default	Description
`name`	`string`	`""`	Field name used in form submission.
`accept`	`string`	`""`	MIME type filter, same shape as the native `<input accept>` attribute.
`multiple`	`boolean`	`false`	Allow selecting more than one file. Reflects to the host.
`label`	`string`	`""`	Label rendered above the picker.
`helper`	`string`	`""`	Small helper text below the picker.
`error`	`string`	`""`	Error message; paints invalid when set.
`buttonText`	`string`	`"Choose file"`	Text on the picker's call-to-action button.
`disabled`	`boolean`	`false`	Disables the control; reflects to the host.
`required`	`boolean`	`false`	Required for form validation; reflects to the host.

Events

Event	Detail	When
`tc-files`	`{ files: File[] }`	Fires after the user picks one or more files.

CSS variables

Variable	Default	Description
`--tc-input-fg`	`var(--tc-color-ink, #14171f)`	Label color.
`--tc-input-border`	`var(--tc-color-rule-strong, #d9cfb8)`	Dashed zone border.
`--tc-input-error`	`var(--tc-color-danger, #b3261e)`	Border + error message color.
`--tc-input-helper`	`var(--tc-color-ink-muted, #6b7280)`	Helper text color.
`--tc-input-radius`	`var(--tc-radius-md, 8px)`	Corner radius.
`--tc-input-font`	`var(--tc-font-sans, …)`	Font family.
`--tc-file-zone-bg`	`var(--tc-color-surface-alt, #faf8f3)`	Background of the picker zone.
`--tc-file-zone-fg`	`var(--tc-color-ink-soft, #4a5061)`	Filename text color.

Examples

Basic usage

<tc-file label="Avatar" accept="image/*"></tc-file>

Multiple

<tc-file label="Photos" accept="image/*" multiple button-text="Choose photos" ></tc-file>

Custom button text

button-text lets you put the action verb on the control itself.

Reading the picked files

<tc-file id="resume" label="Resume" accept=".pdf"></tc-file> <script type="module"> document.getElementById("resume").addEventListener("tc-files", (e) => { const [file] = e.detail.files; console.log("picked", file.name, file.size); }); </script>

In a form

Submits using the form-associated path — single files set setFormValue(file), multiple files set a FormData with repeated entries under name.

Theming

<tc-file style="--tc-file-zone-bg: #f5f5dc; --tc-input-radius: 2px;" label="Subtle zone" ></tc-file>

Accessibility

The visible button is a real <button>; the native <input type="file"> is visually hidden but kept in the DOM for form submission and assistive tech.
The label is associated with the control via wrapping markup; clicking the label focuses the button.
The filename text is plain text — screen readers read it after each pick.
Note: the native file dialog is provided by the browser; styling cannot reach inside it.

← All components