FileInput | tcpsystems/ui

Try it

Invoice attachment Choose file No file chosen

Svelte

<FileInput label="Invoice attachment" accept=".pdf" />

Examples

Invoice

Invoice attachment Choose file No file chosen

Invoice.svelte

<script lang="ts">
	import FileInput from '@tcpsystems/ui/foundation/FileInput';
</script>

<FileInput label="Invoice attachment" accept=".pdf" />

Multiple files

Deployment logs Choose logs No file chosen

Multiple files.svelte

<script lang="ts">
	import FileInput from '@tcpsystems/ui/foundation/FileInput';
</script>

<FileInput label="Deployment logs" accept=".txt,.log" multiple buttonLabel="Choose logs" />

Disabled and error

Archived invoice Choose file No file chosen

Replacement invoice Choose file No file chosen

The previous attachment was rejected. Choose a PDF.

Disabled and error.svelte

<script lang="ts">
	import FileInput from '@tcpsystems/ui/foundation/FileInput';
	import Stack from '@tcpsystems/ui/foundation/Stack';
	const uid = $props.id();
	let invalid = $state(true);
</script>

<Stack>
	<FileInput label="Archived invoice" disabled />
	<FileInput label="Replacement invoice" accept=".pdf" invalid={invalid} describedby={uid}
		onchange={() => invalid = false} />
	<p id={uid}>{invalid ? 'The previous attachment was rejected. Choose a PDF.' : 'Replacement selected for review.'}</p>
</Stack>

API

Import

import FileInput from '@tcpsystems/ui/foundation/FileInput';

Prop	Type	Default
`label?`	`string`	`'File'`
`name?`	`string`	`'file'`
`accept?`	`string`	none
`multiple?`	`boolean`	`false`
`disabled?`	`boolean`	`false`
`describedby?`	`string`	none
`invalid?`	`'true' \| 'false' \| boolean`	none
`buttonLabel?`	`string`	`'Choose file'`

Hook	Kind
`.tcp-file-input`	Root class