Back to documentation
File chooser
A file chooser that looks like a button.
Information
Plan: Personal
Added at: 2026-10-30
Properties
| Property | Type | Default |
|---|---|---|
| Text | string | "Text" |
| Accept | string | "text/plain" |
| Multiple | boolean | false |
| ID | string | "" |
| Theme | enum<string> | "" |
| Font size | string | "1rem" |
| Font weight | string | "600" |
| Letter spacing | string | "normal" |
| Color | string | "var(--ophixor-semantic-text-primary)" |
| Color - Hover | string | "var(--ophixor-semantic-text-primary)" |
| Color - Primary | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Primary - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Success | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Success - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Warning | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Warning - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Danger | string | "var(--ophixor-semantic-text-inverse)" |
| Color - Danger - Hover | string | "var(--ophixor-semantic-text-inverse)" |
| Line height | string | "1.2" |
| Text align | enum<string> | "inherit" |
| Text decoration | string | "none" |
| Text transform | enum<string> | "none" |
| Whitespace | string | "nowrap" |
| Background | string | "none" |
| Background - Hover | string | "none" |
| Background color | string | "var(--ophixor-semantic-surface-base)" |
| Background color - Hover | string | "var(--ophixor-semantic-surface-base)" |
| Background - Primary | string | "none" |
| Background - Primary - Hover | string | "none" |
| Background - Success | string | "none" |
| Background - Success - Hover | string | "none" |
| Background - Warning | string | "none" |
| Background - Warning - Hover | string | "none" |
| Background - Danger | string | "none" |
| Background - Danger - Hover | string | "none" |
| Background color - Primary | string | "var(--ophixor-semantic-interactive-primary)" |
| Background color - Primary - Hover | string | "var(--ophixor-semantic-interactive-primary)" |
| Background color - Success | string | "var(--ophixor-semantic-status-success)" |
| Background color - Success - Hover | string | "var(--ophixor-semantic-status-success)" |
| Background color - Warning | string | "var(--ophixor-semantic-status-warning)" |
| Background color - Warning - Hover | string | "var(--ophixor-semantic-status-warning)" |
| Background color - Danger | string | "var(--ophixor-semantic-status-danger)" |
| Background color - Danger - Hover | string | "var(--ophixor-semantic-status-danger)" |
| Background image | string | "" |
| Background size | string | "" |
| Background position | string | "" |
| Background repeat | string | "" |
| Background blend mode | string | "" |
| Opacity | string | "1" |
| Opacity - Disabled | string | "0.5" |
| Opacity - Hover | string | "1" |
| Cursor | string | "pointer" |
| Cursor - Disabled | string | "default" |
| Border color | string | "var(--ophixor-semantic-border-default)" |
| Border color - Hover | string | "var(--ophixor-semantic-border-default)" |
| Border color - Primary | string | "transparent" |
| Border color - Primary - Hover | string | "transparent" |
| Border color - Success | string | "transparent" |
| Border color - Success - Hover | string | "transparent" |
| Border color - Warning | string | "transparent" |
| Border color - Warning - Hover | string | "transparent" |
| Border color - Danger | string | "transparent" |
| Border color - Danger - Hover | string | "transparent" |
| Border radius | string | "4px" |
| Border width | string | "1px" |
| Border top width | string | "" |
| Border right width | string | "" |
| Border bottom width | string | "" |
| Border left width | string | "" |
| Border style | string | "solid" |
| Box shadow | string | "var(--ophixor-semantic-shadow-low)" |
| Box shadow - Hover | string | "var(--ophixor-semantic-shadow-high)" |
| Box shadow - Active | string | "var(--ophixor-semantic-shadow-low)" |
| Transform - Hover | string | "translateY(-1px)" |
| Transform - Active | string | "none" |
| Text shadow | string | "none" |
| Text shadow - Hover | string | "none" |
| Transition | string | "0.25s ease" |
| Outline | string | "none" |
| Outline - Focus | string | "2px solid var(--ophixor-semantic-interactive-primary)" |
| Backdrop filter | string | "none" |
| Align items along the cross axis | enum<string> | "center" |
| Justify content along the main axis | enum<string> | "center" |
| Align self along the cross axis | enum<string> | "auto" |
| Justify self along the main axis | enum<string> | "auto" |
| Display | string | "inline-flex" |
| Flexbox direction | string | "row" |
| Flexbox wrap | string | "nowrap" |
| Flexbox grow | string | "0" |
| Flexbox shrink | string | "1" |
| Overflow | enum<string> | "visible" |
| Position | enum<string> | "relative" |
| Top | string | "auto" |
| Right | string | "auto" |
| Bottom | string | "auto" |
| Left | string | "auto" |
| Z-index | string | "auto" |
| Transform | string | "none" |
| Transform origin | string | "50% 50% 0" |
| Margin | string | "0px" |
| Margin top | string | "" |
| Margin right | string | "" |
| Margin bottom | string | "" |
| Margin left | string | "" |
| Padding | string | "0.6rem 1rem" |
| Padding top | string | "" |
| Padding right | string | "" |
| Padding bottom | string | "" |
| Padding left | string | "" |
| Gap | string | "0.5rem" |
| Width | string | "auto" |
| Minimum width | string | "0px" |
| Maximum width | string | "none" |
| Height | string | "auto" |
| Minimum height | string | "0px" |
| Maximum height | string | "none" |
| On selection | object | null |
| Disabled | boolean | false |
| Is visible | boolean | true |
| Selectors | array | [] |