---
title: Bildinmatning
image: /images/user-guide/objects/objects.png
---

<Frame>
  <img src="/images/user-guide/objects/objects.png" alt="Header" />
</Frame>

import Tabs from '@theme/Tabs';
import TabItem from '@theme/TabItem';
import { SandpackEditor} from '@site/src/ui/SandpackEditor'
import imageInputCode from '!!raw-loader!@site/src/ui/input/components/imageInputCode.js'

Tillåter användare att ladda upp och ta bort en bild.

<Tabs>
<Tab title="Usage">

```jsx
import { ImageInput } from "@/ui/input/components/ImageInput";

export const MyComponent = () => {
  return <ImageInput/>;
};
```

</Tab>
<Tab title="Props">

| Egenskaper    | Typ      | Beskrivning                                                                                                                  |
| ------------- | -------- | ---------------------------------------------------------------------------------------------------------------------------- |
| bild          | string   | Bildens källa URL                                                                                                            |
| onUpload      | funktion | Funktionen som anropas när en användare laddar upp en ny bild. Den tar emot `File`-objektet som en parameter |
| onRemove      | funktion | Funktionen som anropas när användaren klickar på knappen för att ta bort bilden                                              |
| onAbort       | funktion | Funktionen som anropas när användaren klickar på avbrytknappen under bilduppladdningen                                       |
| isUploading   | boolean  | Indikerar om en bild för närvarande laddas upp                                                                               |
| felmeddelande | string   | Ett valfritt felmeddelande att visa under bildinmatningen                                                                    |
| inaktiverad   | boolean  | Om `true`, är hela inmatningen inaktiverad och knapparna går inte att klicka på                                              |

</Tab>
</Tabs>