Inputs
FileInput
Bit.BlazorUI
BitFileInput is the selection half of working with files: it lets the user hand files to the app - through the file dialog, by dragging them out of the OS onto the component, or by pasting them from the clipboard - without uploading anything anywhere. Each selected file surfaces in C# as a BitFileInputInfo carrying its name, size, MIME type, last-modified time and, on request, the pixel dimensions of an image, and its content can be pulled on demand as a byte array. Selections are validated on arrival against per-file size bounds, a total size budget, allowed extensions or MIME types, a maximum file count, a no-duplicates rule and any custom rule; files that fail stay in the list, marked invalid with a customizable message, so the user can see exactly what went wrong, and the list level limits release their files again as soon as removals free up room. The built-in file list shows names, human-readable sizes, optional image thumbnails and per-file remove buttons, and both the browse area and the list items can be replaced wholesale with templates. Accessibility is wired in rather than bolted on: the constraints can be spelled out in a description tied to the browse button through aria-describedby, and every change of the list is announced through an ARIA live region. When it is time to actually send files to a server, reach for the BitFileUpload component instead.
Usage
Every example is live. Open its code to see exactly what produced the component running underneath.
Basic
Out of the box the BitFileInput offers three ways in: click the browse button to open the file dialog,
drag a file out of the OS and drop it anywhere on the component, or focus the component and paste a file
from the clipboard. Whatever the route, the selection appears in the built-in file list with its name and a
human-readable size, and while files hover over the component the browse button turns into a dashed
drop indicator. Label sets the browse button text, which defaults to "Browse". Disabling the
BitFileInput greys it out and blocks all three routes the dialog, drops and pastes alike.
AllowDrop & AllowPaste
The two alternative routes can be switched off independently. AllowDrop controls dragging files out
of the OS onto the component: turning it off keeps the drop from being handled and shows a "no drop"
cursor, while still swallowing the event so the browser does not navigate away to the dropped file and
lose the page state. AllowPaste controls pasting files from the clipboard; note that a paste is
only delivered to the component while the focus is inside it, so the browse button has to be focused
first that is why pasting is best treated as a power-user shortcut rather than the primary route. Both
take effect immediately when toggled at runtime, as the checkboxes below demonstrate.
Description
Telling the user the rules before they run into them is the single biggest usability win a file input can
offer. Description renders a short hint under the browse button and the part that is easy to
forget wires it to that button through aria-describedby, so a screen reader reads the constraints out
together with the button instead of leaving them to be discovered by trial and error. Spell out the
accepted types and the size ceiling there, matching whatever Accept, AllowedExtensions and
MaxSize actually enforce. DescriptionTemplate takes over when the hint needs markup of its
own, such as the icon below, and Classes.Description / Styles.Description restyle it.
PDF or DOCX, up to 5 MB.
Square images look best. Up to 2 MB.
Multiple
Multiple lets the file dialog hand over several files at once and lets a single drop or paste
carry several files. Without it the dialog is limited to one file, and only the first file of a
multi-file drop is taken the rest are ignored rather than flooding the list.
AutoReset
AutoReset clears the current selection just before the file dialog opens, so every browse starts
from a clean slate the list empties even if the dialog is then cancelled. Handy when a stale
selection lingering behind the dialog would be misleading.
Append
A new selection normally replaces whatever is in the list. Append keeps the existing files and
adds the new selection to the end instead, letting the user build the list up over several rounds of
browsing, dropping or pasting.
AllowDuplicates
Building a list up with Append makes it easy to pick the same file twice by accident. Setting
AllowDuplicates to false catches that: a newly selected file that matches one already in the list
by name, size and last-modified time is marked invalid with the DuplicateErrorMessage instead of
being added as a second working entry. The duplicate stays visible so the user understands why nothing
new appeared. Like the other list level rules, it is re-evaluated after every removal: dismissing the
duplicate clears it, and so does removing the file it duplicates, which leaves the surviving copy valid
instead of stranding it with an error about a file that is no longer there. Select the same file twice
below to see it.
Size limits
Three parameters bound how much data the selection may carry, all in bytes. MaxSize and
MinSize bound each file individually, while MaxTotalSize bounds the accumulated size of the
whole list the files are counted in selection order and the first one that would push the running total
past the budget is rejected, along with every later one that still does not fit. A file outside the
allowed range is not thrown away: it stays in the list marked invalid with an error message explaining
why, so the user can see what went wrong and remove it. MaxSizeErrorMessage,
MinSizeErrorMessage and MaxTotalSizeErrorMessage customize those messages, like the last
example does. Because the total is a list level limit, removing a file re-runs it and any file that now
fits inside the budget becomes valid again on the spot.
Max 1 MB per file:
Min 1 KB per file:
Max 2 MB in total:
Custom error message:
Accept & AllowedExtensions
Two parameters restrict file types at different points. Accept feeds the native accept attribute
with MIME types or extensions, so the file dialog only offers matching files but a drop or paste
never goes through the dialog, so it is no more than a convenience filter. AllowedExtensions is
the actual guard: it checks every file however it arrived, marking mismatches invalid with the
NotAllowedExtensionErrorMessage, and when Accept is not set it also generates the accept
attribute from the same list. Its entries are matched leniently an extension may be written with or
without its leading dot and in any casing and an entry containing a slash is treated as a MIME type
instead, matched against the type the browser reports for the file, with a trailing wildcard like
image/* covering a whole group. That makes it possible to accept every image regardless of its
extension, which a plain extension list cannot express.
Accept (dialog filter only):
AllowedExtensions (validated):
AllowedExtensions with MIME types (validated):
MaxCount
MaxCount caps how many files the list can hold 3 in this example. Files arriving beyond the
cap stay visible but are marked invalid with the MaxCountErrorMessage, so the user sees exactly
which files did not make it instead of them disappearing silently; removing files frees up room and
the over-cap files become valid again. Only files that are otherwise valid consume a slot, so a file
rejected for its size or type never pushes a good file over the cap. Combined with Append the
cap applies to the whole accumulated list, not just a single selection.
FileValidator
When the built-in checks are not enough, FileValidator runs a custom function for each newly
selected file after those checks pass. Returning an error message marks the file invalid and shows the
message under it; returning null accepts the file. Any rule expressible over the file's metadata works
this example rejects empty (zero-byte) files. A validator that throws only invalidates its own file,
using the exception message as the error text, rather than aborting the whole selection.
ReadImageDimensions
Pixel dimensions are the one property of an image that neither the file name nor the metadata reveals,
yet avatars, banners and thumbnails are usually the very things that need a resolution rule. Turning
ReadImageDimensions on makes the component decode every selected image and fill Width and
Height on its file info before validation runs, so a plain FileValidator can accept or
reject on resolution and even name the offending size in its message. Decoding costs time and memory in
proportion to the images, which is why it is opt-in; non-image files and images the browser cannot
decode simply come back with both properties null. The example below asks for at least 300×300.
Directory
Directory switches the browser dialog to folder selection: the user picks a folder, and every
file inside it subfolders included lands in the file list. It also teaches the drop zone to expand a
dropped folder by walking its entries recursively, which a plain file drop cannot do since the browser
hands over no files at all for a directory. All the validations still apply to each file individually,
so size limits and extension rules keep working on folder contents.
Capture
Capture renders the native capture attribute, which asks mobile devices to open a camera or
microphone instead of the file browser "user" requests the front camera, "environment" the rear one.
Desktop browsers ignore the attribute and show the regular file dialog, so the example below behaves
normally on a PC but jumps straight to the camera on a phone.
Preview
ShowPreview renders a thumbnail next to each image file in the list, backed by an object URL the
component creates on selection and revokes when the file is removed or the component is disposed no
manual cleanup needed. The URL is also exposed as PreviewUrl on the file info, ready to be used
in a custom FileViewTemplate; non-image files simply render without a thumbnail.
Removable
ShowRemoveButton puts a remove button on each file item. Removing a file updates the list,
raises OnRemove and OnChange, re-runs the list level limits and releases the file's
reference on the JavaScript side so the browser can free the memory. RemoveButtonIconName swaps
the default Delete icon for any other built-in icon, like the Cancel cross below, and
RemoveButtonTitle replaces the English "Remove" used as the button tooltip and as the prefix of
its accessible label the piece that needs translating in a localized app.
FileSizeFormatter
Each file item shows its size through a built-in humanizer that speaks English and counts in binary
units. FileSizeFormatter takes that decision over: it receives the size in bytes and returns
whatever text should appear, which is where a localized unit name, a different rounding, or the decimal
base some platforms prefer belongs. The first example below spells the units out in Farsi, the second
drops down to raw byte counts with thousands separators.
HideFileList
HideFileList suppresses the built-in file list entirely while the selection keeps working
useful when the app renders its own view of the files elsewhere. The example captures the selection
through OnChange and renders a plain list of its own below the component. Its sibling
HideLabel does the same for the browse button, as shown in the Public API section.
Custom file list:
No files selected yet.
Events
OnChange fires with the current array of files whenever the selection changes after browsing,
dropping, pasting and removing alike. OnInvalid follows it whenever the list holds at least one
invalid file, carrying only those files with their messages, which saves filtering the list by hand to
drive a summary or block a submit button. OnRemove fires once for each removed file. Since file
content is never loaded eagerly, ReadContentAsync fetches bytes on demand pass a file to read
just that one, or call it with no argument to read every valid file in the list, which is what the
example does before showing the loaded byte count next to each file, along with the file's
LastModifiedDate reported by the browser.
Selected files:
Templates
The default UI can be swapped out entirely: LabelTemplate replaces the browse button here with
a full drop-zone panel that hides itself once files are selected and FileViewTemplate replaces
each item of the file list, receiving the file info as its context, validation state and error message
included. Replacing the browse button also replaces the built-in dashed drop indicator that lives on it,
so a custom label should bring its own drag feedback: Classes.Dragging puts a class on the root
element for as long as files hover over the component, which is what turns the panel below blue on drag.
Drag and drop or
Browse files
Public API
The component can be driven entirely from code: Browse opens the file dialog, Reset
silently clears the selection without raising any callback, and RemoveFile removes a specific
file or every file when called without an argument raising OnRemove and OnChange just
like the remove button does. Files exposes the current selection as a read-only list, each entry
carrying its position in Index, and InputId gives the id of the underlying HTML input.
Here the default browse button is hidden via HideLabel and replaced with external BitButtons.
0 file(s) in the list.
Accessibility
The BitFileInput is accessible out of the box: the browse button is a real button focusable with Tab
and activated with Enter or Space and the hidden native input points to it via aria-labelledby, so
screen readers announce the visible label. The file list carries list and listitem roles, and every
remove button gets an aria-label naming the file it removes. A visually hidden live region with
role="status" sits at the end of the component and announces every change of the list, so a screen
reader user hears how many files were taken and how many of them failed validation without having to go
looking and because a live region is skipped when its text repeats verbatim, the component varies each
update with an invisible marker so two identical selections in a row are still both announced.
AnnouncementProvider replaces that built-in English sentence with text of your own the natural
place to translate it or to word it around your domain, as the second example does. AriaLabel
labels the browse button, overriding its visible text for assistive technologies when a short label like
"Browse" does not say enough on its own.
Variant
Variant decides how much of the Color the browse button carries: Fill, the default,
paints the whole button, Outline keeps only the rule around it, and Text drops both so the
button weighs no more than the text it holds - which is what you want when the file input sits among
other form fields and should not read as the primary action of the page. All three fill in on hover and
turn into the same dashed drop zone while a file is dragged over them, so the variant changes the resting
look and nothing else.
Disabled:
Variant & Color:
Color
Color picks the theme color of the browse button and the drag-and-drop indicator, with
Primary as the default. The semantic colors Success, Warning, Error and
friends tie the input to what the selection means, while the Background, Foreground
and Border families keep it legible on non-default surfaces like the inverted panel below.
External Icons
The remove button icon is not limited to the built-in icon font: RemoveButtonIcon takes a
BitIconInfo or a raw CSS class string that can point at any icon library whose stylesheet is
loaded, like FontAwesome or Bootstrap Icons below. Use BitIconInfo.Fa(), BitIconInfo.Bi()
or BitIconInfo.Css() to build one, or stick with the built-in font and just pick a different
icon via RemoveButtonIconName.
FontAwesome:
Bootstrap:
Size
Size scales the browse button, the file list items and their preview thumbnails together:
Small for dense layouts, Medium (the default) for regular forms, and Large where
the input is a primary control or aimed at touch.
Small:
Medium:
Large:
Style & Class
Style and Class land on the root element, which inline styles and a single class cover
well. For anything deeper, Styles and Classes reach the individual parts the browse
button, the file list, each file item, its name, size, error message and remove button and their
Dragging entry applies to the root element only while files are being dragged over the
component, which is how the examples below restyle the drop state without touching the idle look.
Component's Style & Class:
Styles & Classes:
RTL
Setting Dir to BitDir.Rtl mirrors the whole layout for right-to-left languages the
browse button, the file names, sizes and remove buttons all follow so the BitFileInput reads
naturally inside an RTL page like the Farsi example below.
API
Every parameter, public member, sub-class and enum this component exposes.
BitFileInput parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| Accept | string? | null | Accepted file types for the file browser using MIME types or file extensions (e.g., "image/*", ".pdf,.doc"). Applied to the underlying HTML input element's accept attribute. When not set, the accept attribute is generated from AllowedExtensions. |
| AllowDrop | bool | true | Whether files can be selected by dragging them from the operating system and dropping them on the component. |
| AllowDuplicates | bool | true | Whether a file that is already in the file list can be selected again. When disabled, a newly selected file matching an existing one by name, size and last modified time is marked as invalid with the DuplicateErrorMessage instead of being added as a second entry, becoming valid again once the file it duplicates is removed. |
| AllowedExtensions | IReadOnlyCollection<string> | ["*"] | Allowed file types for validation purposes, accepting both file extensions (e.g., [".jpg", ".png", ".pdf"]) and MIME types with an optional wildcard (e.g., ["image/*", "application/pdf"]). The leading dot of an extension is optional and the matching is case-insensitive. Use ["*"] to allow all file types. Files not matching any of these entries will be marked as invalid. |
| AllowPaste | bool | true | Whether files can be selected by pasting them from the clipboard onto the component. The paste is only captured while the focus is inside the component, so the browse button must be focused first. |
| AnnouncementProvider | Func<IReadOnlyList<BitFileInputInfo>, string?>? | null | Custom provider of the text announced by the screen reader through the live region of the component whenever the file list changes. Receives the current file list and returns the text to announce, or null to announce nothing. When not set, a built-in English announcement is used. |
| Append | bool | false | Whether to append newly selected files to the existing file list instead of replacing it. |
| AutoReset | bool | false | Whether the file input is automatically reset (cleared) before opening the file browser dialog, allowing the same file to be selected multiple times consecutively. |
| Capture | string? | null | The capture behavior of the file input on devices with a camera or microphone, rendered as the capture attribute of the input element (e.g., "user" for the front camera, "environment" for the rear camera). |
| Classes | BitFileInputClassStyles? | null | Custom CSS classes for different parts of the BitFileInput. |
| Color | BitColor? | null | The general color of the file input, applied to the browse button and the drag-and-drop indicator. |
| Description | string? | null | A short hint rendered under the browse button and wired to it through aria-describedby, which is the place to spell out the accepted file types and the size limits so that both sighted and screen reader users learn the constraints before hitting them. |
| DescriptionTemplate | RenderFragment? | null | Custom Razor template of the hint rendered under the browse button, taking precedence over Description. |
| Directory | bool | false | Whether to select folders (directories) instead of files, rendered as the webkitdirectory attribute. All files inside the selected folder and its subfolders will be added to the file list. It also makes a dropped folder expand into its contents instead of being ignored. |
| DuplicateErrorMessage | string? | null | Custom error message displayed when a file is selected again while AllowDuplicates is disabled. Defaults to "The file is already selected". |
| FileValidator | Func<BitFileInputInfo, string?>? | null | Custom validation function called for each newly selected file after the built-in validations pass. Return an error message to mark the file as invalid, or null to accept it. |
| FileSizeFormatter | Func<long, string>? | null | Custom formatter of the file size shown under the name of each file item. Receives the size of the file in bytes and returns the text to display, which is the place to localize the units or to switch between the binary and the decimal bases. When not set, a built-in humanizer is used. |
| FileViewTemplate | RenderFragment<BitFileInputInfo>? | null | Custom Razor template for rendering individual file items in the file list. Receives a BitFileInputInfo context for each file. |
| HideFileList | bool | false | Whether to hide the file list that displays the selected files in the UI. |
| HideLabel | bool | false | Whether to hide the default browse button label from the UI. |
| Label | string | Browse | The text displayed on the browse button. Defaults to "Browse". |
| LabelTemplate | RenderFragment? | null | Custom Razor template for the browse button area, allowing full customization of the file selection trigger UI. |
| MaxCount | int | 0 | Maximum allowed number of files in the file list. Files selected beyond this count will be marked as invalid, becoming valid again once removals free up room. Set to 0 for no count limit. |
| MaxCountErrorMessage | string? | null | Custom error message displayed when the number of files exceeds the maximum count limit. Defaults to "The maximum number of files is exceeded". |
| MaxSize | long | 0 | Maximum allowed file size in bytes for validation. Files exceeding this size will be marked as invalid. Set to 0 for no size limit. |
| MaxSizeErrorMessage | string? | null | Custom error message displayed when a file exceeds the maximum size limit. Defaults to "The file size is larger than the max size". |
| MaxTotalSize | long | 0 | Maximum allowed total size in bytes of all the files in the file list. Files pushing the accumulated size beyond this limit will be marked as invalid, becoming valid again once removals free up room. Set to 0 for no total size limit. |
| MaxTotalSizeErrorMessage | string? | null | Custom error message displayed when a file makes the total size of the file list exceed the maximum total size. Defaults to "The total size of the files is larger than the max total size". |
| MinSize | long | 0 | Minimum allowed file size in bytes for validation. Files smaller than this size will be marked as invalid. Set to 0 for no size limit. |
| MinSizeErrorMessage | string? | null | Custom error message displayed when a file is smaller than the minimum size limit. Defaults to "The file size is smaller than the min size". |
| Multiple | bool | false | Whether to allow selecting multiple files simultaneously through the file browser dialog. |
| NotAllowedExtensionErrorMessage | string? | null | Custom error message displayed when a file's extension is not in the allowed extensions list. Defaults to "The file type is not allowed". |
| OnChange | EventCallback<BitFileInputInfo[]> | Callback invoked when the file selection changes, providing an array of BitFileInputInfo representing all selected files. It is also invoked after removing a file through the remove button or the RemoveFile method. | |
| OnInvalid | EventCallback<BitFileInputInfo[]> | Callback invoked right after OnChange whenever the file list holds at least one invalid file, providing an array of only the invalid files along with their validation messages. | |
| OnRemove | EventCallback<BitFileInputInfo> | Callback invoked for each file that gets removed from the file list, either through the remove button or the RemoveFile method. | |
| ReadImageDimensions | bool | false | Whether to decode every selected image file to fill the Width and Height properties of its file info with the pixel dimensions, which makes it possible to enforce resolution rules from a FileValidator. Decoding costs time and memory proportional to the images, so it is disabled by default. |
| RemoveButtonIcon | BitIconInfo? | null | Gets or sets the remove button icon using custom CSS classes for external icon libraries. Takes precedence over RemoveButtonIconName when both are set. |
| RemoveButtonIconName | string? | Delete | Gets or sets the name of the remove button icon from the built-in Fluent UI icons. |
| RemoveButtonTitle | string? | null | The tooltip of the remove button, which is also used as the prefix of its accessible label (e.g., "Remove report.pdf"). Defaults to "Remove". |
| ShowPreview | bool | false | Whether to display a preview thumbnail for image files in the file list. |
| ShowRemoveButton | bool | false | Whether to display a remove button next to each file in the file list, allowing individual file removal. |
| Size | BitSize? | null | The size of the file input, applied to the browse button and the file list items. |
| Styles | BitFileInputClassStyles? | null | Custom CSS styles for different parts of the BitFileInput. |
| Variant | BitVariant? | null | The visual variant of the browse button, which decides how much of the Color it carries: a full fill, only an outline, or neither. |
BitFileInput public members
| Name | Type | Default value | Description |
|---|---|---|---|
| Files | IReadOnlyList<BitFileInputInfo> | [] | A read-only list of all currently selected files with their metadata, validation status, and content. |
| InputId | string? | The unique identifier of the underlying HTML file input element. | |
| Browse | () => Task | Opens the file browser dialog programmatically, allowing users to select files. If AutoReset is enabled, the input is reset before opening. | |
| ReadContentAsync | (BitFileInputInfo? fileInfo = null) => Task | Reads the content of the specified file from the browser and populates its Content property with the byte array, or reads every valid file of the file list when no file is specified. Only reads valid files and only while the component is enabled. | |
| RemoveFile | (BitFileInputInfo? fileInfo = null) => Task | Removes a specific file from the selected files list, or clears all files when no file is specified, invoking the OnRemove callback for each removed file and the OnChange callback afterwards. | |
| Reset | () => Task | Clears all selected files and resets the file input to its initial state without invoking any callback. |
BitComponentBase parameters
| Name | Type | Default value | Description |
|---|---|---|---|
| AriaLabel | string? | null | Gets or sets the accessible label for the component, used by assistive technologies. |
| Class | string? | null | Gets or sets the CSS class name(s) to apply to the rendered element. |
| Dir | BitDir? | null | Gets or sets the text directionality for the component's content. |
| ForceAnimation | bool | false | Gets or sets a value indicating whether the component's animations play at their full duration even when reduced motion is requested. |
| HtmlAttributes | Dictionary<string, object> | new Dictionary<string, object>() | Captures additional HTML attributes to be applied to the rendered element, in addition to the component's parameters. |
| Id | string? | null | Gets or sets the unique identifier for the component's root element. |
| IsEnabled | bool | true | Gets or sets a value indicating whether the component is enabled and can respond to user interaction. |
| Style | string? | null | Gets or sets the CSS style string to apply to the rendered element. |
| TabIndex | string? | null | Gets or sets the tab order index for the component when navigating with the keyboard. |
| Visibility | BitVisibility | BitVisibility.Visible | Gets or sets the visibility state (visible, hidden, or collapsed) of the component. |
BitComponentBase public members
| Name | Type | Default value | Description |
|---|---|---|---|
| UniqueId | Guid | Guid.NewGuid() | Gets the readonly unique identifier for the component's root element, assigned when the component instance is constructed. |
| RootElement | ElementReference | Gets the reference to the root HTML element associated with this component. |
BitFileInputInfo properties
Represents metadata, validation state, and content of a file selected through BitFileInput.
| Name | Type | Default value | Description |
|---|---|---|---|
| ContentType | string | string.Empty | The MIME content type of the file (e.g., "image/png", "application/pdf"). |
| Name | string | string.Empty | The name of the file including its extension (e.g., "document.pdf"). |
| Size | long | The size of the file in bytes. | |
| FileId | string | string.Empty | A unique identifier (GUID) assigned to the file upon selection, used to reference the file in JavaScript interop. |
| Index | int | The zero-based index of the file in the current selection list. | |
| LastModified | long | The last modified time of the file reported by the browser, in milliseconds since the Unix epoch. | |
| LastModifiedDate | DateTimeOffset | The last modified time of the file reported by the browser, as a DateTimeOffset. | |
| PreviewUrl | string? | null | An object URL of the file content that can be used as the source of an img element to preview image files. This is only populated for image files when the ShowPreview parameter of the BitFileInput is enabled. |
| Width | int? | null | The width of the image in pixels, only populated for decodable image files when the ReadImageDimensions parameter of the BitFileInput is enabled. It is null for anything else. |
| Height | int? | null | The height of the image in pixels, only populated for decodable image files when the ReadImageDimensions parameter of the BitFileInput is enabled. It is null for anything else. |
| IsValid | bool | true | Whether the file has passed all validation checks including size constraints and allowed extensions. |
| Message | string? | null | The validation error message when the file has failed a validation check (e.g., size or extension). This is null when the file is valid. |
| Content | byte[]? | null | The file content as a byte array, populated by calling ReadContentAsync. This is null by default and only loaded on demand. |
BitFileInputClassStyles properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Root | string? | null | Custom CSS classes/styles for the root element of the BitFileInput. |
| Dragging | string? | null | Custom CSS classes/styles for the root element while files are being dragged over the BitFileInput. |
| Label | string? | null | Custom CSS classes/styles for the browse button (label) of the BitFileInput. |
| Description | string? | null | Custom CSS classes/styles for the description (hint) of the BitFileInput. |
| FileList | string? | null | Custom CSS classes/styles for the file list container of the BitFileInput. |
| FileItem | string? | null | Custom CSS classes/styles for each file item of the BitFileInput. |
| Preview | string? | null | Custom CSS classes/styles for the image preview thumbnail of each file item of the BitFileInput. |
| FileName | string? | null | Custom CSS classes/styles for the file name of each file item of the BitFileInput. |
| FileSize | string? | null | Custom CSS classes/styles for the file size of each file item of the BitFileInput. |
| ErrorMessage | string? | null | Custom CSS classes/styles for the validation error message of each invalid file item of the BitFileInput. |
| RemoveButton | string? | null | Custom CSS classes/styles for the remove button of each file item of the BitFileInput. |
| RemoveIcon | string? | null | Custom CSS classes/styles for the remove button icon of each file item of the BitFileInput. |
BitIconInfo properties
| Name | Type | Default value | Description |
|---|---|---|---|
| Name | string? | null | Gets or sets the name of the icon. |
| BaseClass | string? | null | Gets or sets the base CSS class for the icon. For built-in Fluent UI icons, this defaults to "bit-icon". For external icon libraries like FontAwesome, you might set this to "fa" or leave empty. |
| Prefix | string? | null | Gets or sets the CSS class prefix used before the icon name. For built-in Fluent UI icons, this defaults to "bit-icon--". For external icon libraries, you might set this to "fa-" or leave empty. |
BitColor enum
| Name | Value | Description |
|---|---|---|
| Primary | 0 | Primary general color. |
| Secondary | 1 | Secondary general color. |
| Tertiary | 2 | Tertiary general color. |
| Info | 3 | Info general color. |
| Success | 4 | Success general color. |
| Warning | 5 | Warning general color. |
| SevereWarning | 6 | SevereWarning general color. |
| Error | 7 | Error general color. |
| PrimaryBackground | 8 | Primary background color. |
| SecondaryBackground | 9 | Secondary background color. |
| TertiaryBackground | 10 | Tertiary background color. |
| PrimaryForeground | 11 | Primary foreground color. |
| SecondaryForeground | 12 | Secondary foreground color. |
| TertiaryForeground | 13 | Tertiary foreground color. |
| PrimaryBorder | 14 | Primary border color. |
| SecondaryBorder | 15 | Secondary border color. |
| TertiaryBorder | 16 | Tertiary border color. |
BitSize enum
| Name | Value | Description |
|---|---|---|
| Small | 0 | The small size file input. |
| Medium | 1 | The medium size file input. |
| Large | 2 | The large size file input. |
BitVariant enum
| Name | Value | Description |
|---|---|---|
| Fill | 0 | Fill styled variant. |
| Outline | 1 | Outline styled variant. |
| Text | 2 | Text styled variant. |
BitVisibility enum
| Name | Value | Description |
|---|---|---|
| Visible | 0 | The content of the component is visible. |
| Hidden | 1 | The content of the component is hidden, but the space it takes on the page remains (visibility:hidden). |
| Collapsed | 2 | The component is hidden (display:none). |
BitDir enum
| Name | Value | Description |
|---|---|---|
| Ltr | 0 | Ltr (left to right) is to be used for languages that are written from the left to the right (like English). |
| Rtl | 1 | Rtl (right to left) is to be used for languages that are written from the right to the left (like Arabic). |
| Auto | 2 | Auto lets the user agent decide. It uses a basic algorithm as it parses the characters inside the element until it finds a character with a strong directionality, then applies that directionality to the whole element. |
Feedback
Found a mistake, a gap, or something that could be clearer? Every page and every component is one click from its source.