Skip to main content
Browse docs

Marwes documentation

Input

Broad text-entry family spanning native text controls, Marwes-default select fields, OTP entry, and manual-review-heavy rich text.

What this family solves

Broad text-entry family spanning native text controls, Marwes-default select fields, OTP entry, and manual-review-heavy rich text.

Use when

  • The UI needs text-like data entry with shared label, helper, error, and validation patterns.
  • The product flow should benefit from purpose-level field wrappers such as SearchField, PasswordField, or DropdownField.
  • The implementation should stay aligned across React, Vue, and Svelte through shared field helpers and contracts.

Avoid when

  • A different family such as checkbox, radio, or switch is the more honest control type.
  • A custom dropdown visual is being chosen without testing the Marwes-default interaction path and native fallback behavior.
  • The team is not prepared to manually review rich-text editing behavior in real browser and assistive-technology combinations.

Public imports

Choose an adapter in the verified examples. The inventory below reflects each framework package exactly.

React — @marwes-ui/react

Components

CurrencyField, DateOfBirthField, DropdownField, EmailField, InputField, InputOtpField, PasswordField, PhoneField, RichTextField, SearchField, SelectField, TextareaField, URLField, ZipCodeField

Types

CurrencyFieldProps, DateOfBirthFieldProps, DropdownFieldProps, EmailFieldProps, InputFieldProps, InputOtpFieldProps, PasswordFieldProps, PhoneFieldProps, RichTextFieldProps, SearchFieldProps, SelectAppearance, SelectFieldProps, SelectFieldVariant, SelectOption, TextareaFieldProps, URLFieldProps, ZipCodeFieldProps

Vue — @marwes-ui/vue

Components

CurrencyField, DateOfBirthField, DropdownField, EmailField, InputField, InputOtpField, PasswordField, PhoneField, RichTextField, SearchField, SelectField, TextareaField, URLField, ZipCodeField

Types

CurrencyFieldProps, DateOfBirthFieldProps, DropdownFieldProps, EmailFieldProps, InputFieldProps, InputOtpFieldProps, PasswordFieldProps, PhoneFieldProps, RichTextFieldProps, SearchFieldProps, SelectAppearance, SelectFieldProps, SelectFieldVariant, SelectOption, TextareaFieldProps, URLFieldProps, ZipCodeFieldProps

Svelte — @marwes-ui/svelte

Components

CurrencyField, DateOfBirthField, DropdownField, EmailField, InputField, InputOtpField, PasswordField, PhoneField, RichTextField, SearchField, SelectField, TextareaField, URLField, ZipCodeField

Types

CurrencyFieldProps, DateOfBirthFieldProps, DropdownFieldProps, EmailFieldProps, InputFieldProps, InputOtpFieldProps, PasswordFieldProps, PhoneFieldProps, RichTextFieldProps, SearchFieldProps, SelectAppearance, SelectFieldProps, SelectFieldVariant, SelectOption, TextareaFieldProps, URLFieldProps, ZipCodeFieldProps

Verified minimal examples

These examples come from the same fixtures verified by the repository checks.

React

import { CurrencyField, EmailField, PhoneField } from "@marwes-ui/react"
import { useState } from "react"

export function Example() {
  const [amount, setAmount] = useState("")
  const [email, setEmail] = useState("")
  const [phone, setPhone] = useState("")

  return (
    <>
      <CurrencyField
        label="Amount"
        currency="USD"
        input={{ placeholder: "0.00", value: amount, onValueChange: setAmount }}
      />
      <EmailField
        label="Email"
        input={{ placeholder: "you@example.com", value: email, onValueChange: setEmail }}
      />
      <PhoneField
        label="Phone"
        input={{ placeholder: "+1 (555) 000-0000", value: phone, onValueChange: setPhone }}
      />
    </>
  )
}

Vue

<script setup lang="ts">
import { ref } from "vue"
import { CurrencyField, EmailField, PhoneField } from "@marwes-ui/vue"

const amount = ref("")
const email = ref("")
const phone = ref("")
</script>

<template>
  <CurrencyField
    v-model="amount"
    label="Amount"
    currency="USD"
    :input="{ placeholder: '0.00' }"
  />
  <EmailField
    v-model="email"
    label="Email"
    :input="{ placeholder: 'you@example.com' }"
  />
  <PhoneField
    v-model="phone"
    label="Phone"
    :input="{ placeholder: '+1 (555) 000-0000' }"
  />
</template>

Svelte

<script lang="ts">
  import { CurrencyField, EmailField, PhoneField } from "@marwes-ui/svelte"

  let amount = $state("")
  let email = $state("")
  let phone = $state("")
</script>

<CurrencyField
  label="Amount"
  currency="USD"
  value={amount}
  input={{
    placeholder: "0.00",
    oninput: (event: Event & { currentTarget: HTMLInputElement }) =>
      (amount = event.currentTarget.value),
  }}
/>
<EmailField
  label="Email"
  value={email}
  input={{
    placeholder: "you@example.com",
    oninput: (event: Event & { currentTarget: HTMLInputElement }) =>
      (email = event.currentTarget.value),
  }}
/>
<PhoneField
  label="Phone"
  value={phone}
  input={{
    placeholder: "+1 (555) 000-0000",
    oninput: (event: Event & { currentTarget: HTMLInputElement }) =>
      (phone = event.currentTarget.value),
  }}
/>

Accessibility requirements

  • Accessible names: Provide a truthful accessible name and preserve Marwes focus indicators.
  • Keyboard and screen-reader review: Verify keyboard behavior and screen-reader output in the finished product flow.
  • Field relationships: Use the public Field component so labels, helper text, errors, and invalid state stay connected.
  • Manual review boundary: RichTextField editing behavior in supported browser and assistive-technology combinations.
  • Manual review 2: Edge-case custom dropdown interaction if the explicit custom path remains shipped.
  • Manual review 3: Future design alignment when a dedicated RichTextField Figma node becomes available.

Theming

Input uses Marwes preset CSS and theme variables. Customize it through the theme passed to MarwesProvider; do not add a second component stylesheet. See the theming guide for configuration and token details.

Resources