Inputs@knitui/components

FileButton

FileButton opens the native file picker from any trigger you render. A render-prop children receives { onClick }, and the picked File or File[] is delivered through onChange. The actual <input type="file"> is hidden. Use resetRef to imperatively clear the selection.

WebiOSAndroidnative split4 style slots15 own props8 examples

Stories Source Tests Native source Open in Storybook

import { FileButton } from "@knitui/components";

Playground

Loading playground…

acceptMIME type filter, e.g. `"image/png,image/jpeg"`.

multipleAllow selecting more than one file at once.

false

disabledDisables the picker — the render-prop onClick becomes a no-op.

false

captureRequest a fresh capture from a device camera or microphone.

name

form

Playground

<FileButton
  onChange={() => {}}
  disabled={false}
  multiple={false}
>
  {({ onClick }: { onClick: () => void }) => (
    <Button onClick={onClick}>Select file</Button>
  )}
</FileButton>

Examples

Shadows

The shadow elevation ladder applied to the render-prop Button trigger, from xs to xl.

Loading example…

ShadowsSource Storybook

Disabled

Disabled state — the trigger is rendered but clicking it does nothing.

Loading example…

DisabledSource Storybook

Multiple

Multiple selection — onChange receives a File[] instead of a single File | null.

Loading example…

MultipleSource Storybook

Accept Images

Accept filter — restricts the picker to image files only via the accept prop.

Loading example…

Accept ImagesSource Storybook

With Reset

Controlled with reset — shows the selected filename and lets the user clear the input via resetRef.

Loading example…

With ResetSource Storybook

Custom Trigger

Custom trigger — any element can act as the trigger, not just a Button.

Loading example…

Custom TriggerSource Storybook

Capture

Capture — requests a direct camera or microphone capture on supported devices.

Loading example…

CaptureSource Storybook

Props

Prop	Type	Default	Description
`onChange` required	`(payload: FileButtonValue<Multiple, TFile>) => void`	—	Called with the picked file(s). Shape depends on `multiple`.
`accept`	`string \| undefined`	—	MIME type filter, e.g. `"image/png,image/jpeg"`.
`capture`	`boolean \| "user" \| "environment" \| undefined` unset · true · user · environment	—	Request a fresh capture from a device camera or microphone.
`children`	`ReactNode \| ((props: { onClick: () => void; }) => ReactNode)`	—	Trigger content. A node (or nothing) renders the built-in `Button` with this as its label; a `({ onClick }) => ReactNode` function renders your own trigger instead.
`disabled` system	`boolean \| undefined`	`false`	Disables the picker — the render-prop onClick becomes a no-op.
`form`	`string \| undefined`	—	`form` attribute of the input (web only).
`fullWidth` system	`boolean \| undefined`	—
`gradient` system	`GradientValue \| undefined`	—	Gradient fill for `variant="gradient"` (ignored otherwise). Two-color shorthand `{ from, to, deg }` or multi-step `{ stops, deg }`; colors accept `$colorN` ramp tokens or any CSS color. Defaults to the active theme ramp.
`inputProps`	`FileButtonInputProps \| undefined`	—	Props spread onto the hidden input element (web only).
`leftSection`	`ReactNode`	—
`loaderProps`	`Partial<LoaderProps> \| undefined`	—
`loading`	`boolean \| undefined`	—
`multiple`	`Multiple \| undefined`	`false`	Allow selecting more than one file at once.
`name`	`string \| undefined`	—	`name` attribute of the input (web only).
`pickFiles`	`FileButtonPicker<TFile> \| undefined`	—	Native-only resolver that opens a platform file/image picker and returns the picked files. Required for picking on native; ignored on web.
`radius` system	`string \| number \| undefined`	—
`ref`	`Ref<HTMLInputElement> \| undefined`	—	Ref forwarded to the underlying hidden `<input type="file">` (web only).
`resetRef`	`Ref<() => void> \| undefined`	—	Ref to a function that clears the selection (`() => void`).
`rightSection`	`ReactNode`	—
`shadow` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`size` system	`"xs" \| "sm" \| "md" \| "lg" \| "xl" \| "xxs" \| "xxl" \| undefined`	—
`styles` system	`SlotStyles<ButtonStyles> \| undefined`	—	Per-slot style sugar — props spread onto the matching styled part.
`theme` system	`ThemeName \| null \| undefined`	—	Applies a theme to this element
`variant` system	`"light" \| "outline" \| "white" \| "transparent" \| "default" \| "filled" \| "subtle" \| "gradient" \| undefined`	—

Style slots

Every part of FileButton can be styled through the styles prop. Explicit props on the component always win over slot styles.

Slot	Usage
`label`	`styles={{ label: { … } }}`
`left`	`styles={{ left: { … } }}`
`loader`	`styles={{ loader: { … } }}`
`right`	`styles={{ right: { … } }}`

Plus 496 inherited style props from Box — the full Tamagui/React Native style surface, including token shorthands like p, mx, bg and c. See Tokens for the scales they accept, or the full list.