# FileInput ## Description BitFileInput lets the user hand files to the app - through the file dialog, by dropping them onto it or by pasting them - without uploading anything. Each file surfaces in C# as a BitFileInputInfo (name, size, type, folder and, on request, image dimensions) and is validated on arrival against size, total size, type, count, duplicate and custom rules; a rejected file stays in the list with its reason. Content is read on demand, as a byte array or a stream. A drop zone panel, thumbnails, type glyphs, remove buttons, templates and screen reader announcements are built in. To send files to a server, use BitFileUpload. ## 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 folder, 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. | | DropZoneIcon | `BitIconInfo?` | null | The glyph of the drop zone panel, using custom CSS classes for external icon libraries. Takes precedence over DropZoneIconName when both are set, and is only rendered while ShowDropZone is enabled. | | DropZoneIconName | `string?` | null | The name of the drop zone panel's glyph from the built-in Fluent UI icons. Defaults to "CloudUpload", and an empty string leaves the panel without a glyph at all. | | DuplicateErrorMessage | `string?` | null | Custom error message displayed when a file is selected again while AllowDuplicates is disabled. Defaults to "The file is already selected". | | FileIconSelector | `Func<BitFileInputInfo, BitIconInfo?>?` | null | Custom provider of the glyph shown in the thumbnail's place for a file that has no image preview, which is rendered while ShowPreview is enabled. Receives the file and returns the icon to draw, or null to leave that file without one. When not set, the icon is picked from the file's MIME type and extension. | | FileListAriaLabel | `string?` | null | The accessible name of the file list, which tells a screen reader user walking the lists of the page what this one holds. Defaults to "Selected files". | | 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. | | 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. | | 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". | | ShowDropZone | `bool` | false | Whether to render the browse area as a full width drop zone panel - a dashed rule around a glyph and the label - instead of an ordinary button. It is the same button underneath, so it is still reached with Tab and activated with Enter or Space, and it carries the drag indicator exactly as the button does. It also makes Outline the default variant; set Variant to take that back. | | ShowPreview | `bool` | false | Whether to display a preview thumbnail for image files in the file list, and a file type glyph in the same place for every file that has no preview. | | 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. | | Title | `string?` | null | The tooltip of the browse button, rendered as its title attribute. | | 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. | | 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. | ## 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, CancellationToken cancellationToken = default) => 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. The whole file crosses the interop boundary as one message, which on Blazor Server the circuit caps (SignalR's MaximumReceiveMessageSize, 32 KB by default), so anything larger is read with OpenReadStreamAsync instead. | | OpenReadStreamAsync | `(BitFileInputInfo fileInfo, long? maxAllowedSize = null, CancellationToken cancellationToken = default) => Task<Stream>` | | Opens a forward-only stream over the content of the specified file, which the runtime reads from the browser in chunks instead of materializing the whole file in memory the way ReadContentAsync does - which is also what gets a file past a Blazor Server circuit's message size cap. Unlike ReadContentAsync it also reads a file the validations rejected. maxAllowedSize defaults to the size the browser reported for the file, and the stream must be disposed by the caller. | | 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. | | 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. | ## Enums ### 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. | ## Sub Classes ### 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"). | | RelativePath | `string` | string.Empty | The path of the file relative to the selected folder, including the folder's own name (e.g., "photos/2024/summer.jpg"). It is only reported by the browser for a folder selection or a dropped folder, and is an empty string for a file picked or dropped on its own. | | 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. | | Extension | `string` | | The extension of the file including its leading dot, lowercased (e.g. ".pdf"), or an empty string for a file whose name carries none, a dotfile (".gitignore") included. | | 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. | | DropZoneIcon | `string?` | null | Custom CSS classes/styles for the glyph of the drop zone panel, which is only rendered while ShowDropZone is enabled. | | 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. | | FileIcon | `string?` | null | Custom CSS classes/styles for the file type glyph shown in the thumbnail's place of each file item that has no image preview. | | FileName | `string?` | null | Custom CSS classes/styles for the file name of each file item of the BitFileInput. | | FilePath | `string?` | null | Custom CSS classes/styles for the folder of each file item that came from a folder selection. | | 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. | ## CSS Variables Public CSS custom properties read off the component's root. Set one on `:root` to restyle every instance, on any ancestor to restyle the ones inside it, or on the `Style` of one instance. | Name | Default Value | Description | | :--- | :------------ | :---------- | | `--bit-FileInput-max-width` | 21.875rem | The widest the whole component gets. Set it to 100% for a file input that fills its column. | | `--bit-FileInput-color` | The Color role's main color | The role color: the fill of a Fill browse button, the rule and the text of an Outline or Text one. | | `--bit-FileInput-text-color` | The Color role's on-color | Text drawn on top of the role color. | | `--bit-FileInput-hover-color` | The Color role's hover color | Role color while the browse button is hovered (pointer devices only). | | `--bit-FileInput-active-color` | The Color role's active color | Role color while the browse button is pressed. | | `--bit-FileInput-focus-color` | The Color role's focus color | Color of the keyboard focus ring of the browse button and of each remove button. | | `--bit-FileInput-disabled-color` | --bit-clr-fg-dis | Foreground when IsEnabled is false. | | `--bit-FileInput-disabled-background` | --bit-clr-bg-dis | Background of the browse button and of the remove buttons when IsEnabled is false. | | `--bit-FileInput-disabled-border-color` | --bit-clr-brd-dis | Border color of the browse button when IsEnabled is false. | | `--bit-FileInput-label-height` | --bit-siz-ctrl-sm / -md / -lg per Size | Smallest height of the browse button, which is what lines it up with the other controls of its size. | | `--bit-FileInput-label-padding` | --bit-siz-ctrl-pad-y-* --bit-siz-ctrl-pad-x-* per Size | Padding of the browse button. | | `--bit-FileInput-label-font-size` | Per Size, from the type ramp | Text size of the browse button. | | `--bit-FileInput-label-font-weight` | --bit-tpg-font-weight | Text weight of the browse button, which defaults to the weight the theme gives every control label. | | `--bit-FileInput-label-radius` | --bit-shp-radius-button | Corner radius of the browse button, which its focus ring follows. | | `--bit-FileInput-drop-zone-height` | Per Size, 4.5rem / 5.5rem / 6.5rem | The smallest height of the drop zone panel rendered by ShowDropZone. | | `--bit-FileInput-drop-zone-padding` | Per Size, from the spacing rhythm | Padding of the drop zone panel. | | `--bit-FileInput-drop-zone-radius` | --bit-shp-radius-surface | Corner radius of the drop zone panel, which its focus ring follows. | | `--bit-FileInput-drop-zone-border-width` | --bit-shp-brd-width-thick | Rule thickness of the drop zone panel. | | `--bit-FileInput-drop-zone-border-style` | dashed | Rule style of the drop zone panel at rest. Set it to solid for a panel that reads as a surface rather than as a target. | | `--bit-FileInput-drop-zone-icon-size` | Per Size, 1.5rem / 2rem / 2.5rem | Glyph size inside the drop zone panel. | | `--bit-FileInput-description-color` | --bit-clr-fg-sec | Color of the hint under the browse button. | | `--bit-FileInput-description-font-size` | Per Size, from the type ramp | Text size of that hint, of the file size and of the folder. | | `--bit-FileInput-drop-color` | --bit-FileInput-text-color | Rule and text of the browse button while files are dragged over the component. | | `--bit-FileInput-drop-background` | --bit-FileInput-hover-color | Fill of the browse button while files are dragged over the component. | | `--bit-FileInput-drop-border-style` | dashed | Border style of the drop indicator. Set it to solid for a drop state that does not change the shape of the button. | | `--bit-FileInput-file-list-max-height` | none | The tallest the file list gets before it scrolls, which is what keeps a folder selection of thousands of files from pushing the rest of the page away. | | `--bit-FileInput-item-background` | --bit-clr-bg-sec | Background of a file item, valid or not. | | `--bit-FileInput-item-hover-background` | --bit-FileInput-item-background | Background of a hovered valid file item (pointer devices only). | | `--bit-FileInput-item-border-color` | --bit-clr-brd-pri | Border of a file item at rest. | | `--bit-FileInput-item-hover-border-color` | --bit-FileInput-item-border-color, then --bit-clr-brd-pri-hover | Border of a hovered file item (pointer devices only). It falls back to the resting border color first, so repainting an item's rule covers its hover without a second variable. | | `--bit-FileInput-item-radius` | --bit-shp-radius-surface | Corner radius of a file item. | | `--bit-FileInput-item-padding` | 0.5rem | Padding around the name, the size and the error message of a file item. | | `--bit-FileInput-item-gap` | 0.1875rem | Room between two file items, and above the first one. | | `--bit-FileInput-item-font-size` | Per Size, from the type ramp | Text size of the file name. | | `--bit-FileInput-file-name-color` | --bit-clr-fg-pri | Color of the file name. | | `--bit-FileInput-file-size-color` | --bit-clr-fg-sec | Color of the file size and of the folder beside it. | | `--bit-FileInput-error-color` | --bit-clr-err | Message and border of an invalid file item. | | `--bit-FileInput-invalid-background` | --bit-FileInput-item-background | Background of an invalid file item. It matches a valid one by default so a rejected file still reads as a row of the list; a tint of the error color is the other reasonable choice. | | `--bit-FileInput-preview-size` | 2rem / 2.5rem / 3.25rem per Size | Side of the image thumbnail and of the file type glyph standing in for it. | | `--bit-FileInput-preview-radius` | --bit-shp-radius-sm | Corner radius of the image thumbnail. | | `--bit-FileInput-file-icon-color` | --bit-clr-fg-sec | Color of the file type glyph. | | `--bit-FileInput-remove-button-size` | --bit-siz-ctrl-sm / -md / -lg per Size | Side of the square remove button. | | `--bit-FileInput-remove-button-color` | --bit-clr-fg-pri | Glyph color of the remove button. | | `--bit-FileInput-remove-button-background` | --bit-clr-bg-sec | Background of the remove button at rest. | | `--bit-FileInput-remove-button-hover-background` | --bit-clr-bg-sec-hover | Background of a hovered remove button (pointer devices only). | | `--bit-FileInput-remove-button-active-background` | --bit-clr-bg-sec-active | Background of a pressed remove button. | | `--bit-FileInput-remove-icon-size` | --bit-siz-icon-sm / -md / -lg per Size | Glyph size of the remove button. | ## Examples \n**Basic**: ```razor ``` \n**AllowDrop & AllowPaste**: ```razor ``` ```csharp private bool allowDrop = true; private bool allowPaste = true; ``` \n**Description**: ```razor