Form Components

Components for user input and actions.

Button

An action button with multiple variants, tones, and states.

import { Button } from "@qumra/manara";

// Variants
<Button variant="primary">Primary</Button>
<Button variant="secondary">Secondary</Button>
<Button variant="tertiary">Tertiary</Button>
<Button variant="plain">Plain</Button>

// Tones
<Button variant="primary" tone="critical">Delete</Button>
<Button variant="primary" tone="success">Publish</Button>

// States
<Button loading>Saving...</Button>
<Button disabled>Disabled</Button>

// Full width
<Button variant="primary" fullWidth>Submit Order</Button>

// With icon
<Button icon={PlusIcon}>Add Product</Button>

// As link
<Button url="/products" external>View Products</Button>

// Submit button (for forms)
<Button variant="primary" submit>Submit</Button>

Props

Prop	Type	Default	Description
variant	"primary" | "secondary" | "tertiary" | "plain"	"secondary"	Visual style variant.
tone	"default" | "critical" | "success"	"default"	Color tone.
size	"sm" | "md" | "lg"	"md"	Button size.
fullWidth	boolean	false	Stretch to full container width.
disabled	boolean	false	Disable the button.
loading	boolean	false	Show loading spinner.
url	string	--	Render as a link.
external	boolean	false	Open link in new tab.
icon	ReactNode	--	Icon element to display.
onClick	() => void	--	Click handler.
submit	boolean	false	Act as a form submit button.
children	ReactNode	--	Button label.

---

TextField

A text input field with label, validation, and help text.

import { TextField } from "@qumra/manara";
import { useState } from "react";

function ProductForm() {
  const [title, setTitle] = useState("");
  const [price, setPrice] = useState("");

  return (
    <form>
      <TextField
        label="Product Title"
        value={title}
        onChange={setTitle}
        placeholder="Enter product title"
        helpText="The name customers will see."
      />

      <TextField
        label="Price"
        type="number"
        value={price}
        onChange={setPrice}
        prefix="SAR"
        helpText="Set the selling price."
      />

      <TextField
        label="Description"
        value=""
        onChange={() => {}}
        multiline={4}
        placeholder="Describe your product..."
      />

      <TextField
        label="SKU"
        value=""
        onChange={() => {}}
        error="SKU is required"
      />
    </form>
  );
}

Props

Prop	Type	Default	Description
label	string	--	Input label text.
value	string	--	Current input value.
onChange	(value: string) => void	--	Change handler.
type	"text" | "number" | "email" | "password" | "tel" | "url"	"text"	Input type.
placeholder	string	--	Placeholder text.
helpText	string	--	Help text below the input.
error	string	--	Error message (shows red border).
prefix	string	--	Text prefix inside the input.
suffix	string	--	Text suffix inside the input.
multiline	number	--	Number of rows for textarea mode.
disabled	boolean	false	Disable the input.
readOnly	boolean	false	Make the input read-only.
autoFocus	boolean	false	Auto-focus on mount.

---

Select

A dropdown select input for choosing from a list of options.

import { Select } from "@qumra/manara";
import { useState } from "react";

function StatusFilter() {
  const [status, setStatus] = useState("active");

  return (
    <Select
      label="Status"
      value={status}
      onChange={setStatus}
      options={[
        { label: "Active", value: "active" },
        { label: "Draft", value: "draft" },
        { label: "Archived", value: "archived" },
      ]}
    />
  );
}

Props

Prop	Type	Default	Description
label	string	--	Select label text.
value	string	--	Currently selected value.
onChange	(value: string) => void	--	Change handler.
options	{ label: string; value: string }[]	--	Available options.
placeholder	string	--	Placeholder when no value is selected.
helpText	string	--	Help text below the select.
error	string	--	Error message.
disabled	boolean	false	Disable the select.