UI
Form inputs
Look up the money, date, tag, translated and Markdown inputs that go inside a form field.
These inputs cover values Nuxt UI has no control for, such as money or translated text. This page is for anyone who builds forms. Set up the module first: Overview.
They are auto-imported by name and bind with v-model.
| Component | Model | Props | Purpose |
|---|---|---|---|
CurrencyInput | string, a currency code (default 'EUR') | currencies?: Currency[] | A currency select; by default every currency the runtime knows. |
MoneyInput | { currency, amount }, default { currency: 'EUR', amount: 0 } | currencies?: Currency[] | An amount and a currency. amount is in minor units (cents). |
DateInput | Date | string | number | undefined | type?: 'date' | 'string' (default 'date') | A date picker. It emits a Date, or an ISO string with type="string". |
IntervalInput | number of seconds (default 86400) | none | An amount with a minutes, hours or days unit. At least 60 seconds. |
TagInput | string[] | placeholder?, searchPlaceholder?, multiple? (default true) | Create and pick tags. |
UrlInput | string | none | A URL field that requires http:// or https://. Emits success(url) when valid. |
IconInput | string | formItem? | An Iconify icon picker. |
SwitchToggle | boolean | none | A switch. |
MarkdownTextarea | string | placeholder?, rows?, required?, disabled?, preview?, mdc?, mdcData? | A textarea with an optional Write and Preview toggle. mdc renders the preview with MDC. |
TranslatedInput | Translated | null | undefined | placeholder?, multiline?, rows?, preview? (default true), mdc?, mdcData?, required?, disabled? | One string, or one row per configured locale. |
MonacoCodeEditor | string | language? ('typescript'), height? ('160px'), fullscreen? (true) | A Monaco code editor. Needs the nuxt-monaco-editor module. |
MoneyInput. v-model:amount binds the amount in major units, and v-model:currency binds the code.
mdcData. It fills {{ name }} variables in an MDC preview.
Next steps
- Forms and actions – put these inputs in a create or edit slideover.
- UI reference – convert money and translated text in your own code.