Form & Input

Button၊ text field၊ select နှင့် ဆက်စပ် Shadcn form controls များကို @quan-erp/shared-ui မှ ရယူအသုံးပြုရပါသည်။ အတည်ပြုချက်ပါသော plugin form များအတွက် Forms စာမျက်နှာ (Form + Zod stack) ကိုလည်း ကြည့်ရပါသည်။

အသုံးပြုပုံ

Control အားလုံးကို @quan-erp/shared-ui မှ import လုပ်ရပါသည်။ အတည်ပြုချက်ပါသော form များတွင် Form stack ကို ဦးစားပေးအသုံးပြုပါ။ Label / Field ကို အတည်ပြုချက်မလိုသော ရိုးရှင်းသော layout များတွင်သာ သုံးပါ။

Button

Primary action control with variants (default, outline, ghost, destructive, …) and sizes.

TSXButton

import { Button } from "@quan-erp/shared-ui";

<Button variant="outline">Save</Button>

Shadcn — Button

Button Group

Group related buttons into a single segmented control.

TSXButton Group

import { ButtonGroup } from "@quan-erp/shared-ui";

<ButtonGroup>
  <Button variant="outline">Left</Button>
  <Button variant="outline">Right</Button>
</ButtonGroup>

Shadcn — Button Group

Input

Single-line text input. Pair with FormControl inside FormField for validated forms.

TSXInput

import { Input } from "@quan-erp/shared-ui";

<Input type="email" placeholder="Email" />

Shadcn — Input

Input Group

Input with prefix / suffix addons (icons, units, actions).

TSXInput Group

import { InputGroup } from "@quan-erp/shared-ui";

Shadcn — Input Group

Input OTP

One-time password / pin input slots.

TSXInput OTP

import {
  InputOTP,
  InputOTPGroup,
  InputOTPSlot,
} from "@quan-erp/shared-ui";

Shadcn — Input OTP

Textarea

Multi-line text input.

TSXTextarea

import { Textarea } from "@quan-erp/shared-ui";

<Textarea placeholder="Notes" rows={4} />

Shadcn — Textarea

Checkbox

Boolean checkbox control.

TSXCheckbox

import { Checkbox } from "@quan-erp/shared-ui";

<Checkbox id="terms" />

Shadcn — Checkbox

Radio Group

Exclusive choice among options.

TSXRadio Group

import {
  RadioGroup,
  RadioGroupItem,
} from "@quan-erp/shared-ui";

Shadcn — Radio Group

Select

Styled select dropdown built on Radix Select.

TSXSelect

import {
  Select,
  SelectTrigger,
  SelectValue,
  SelectContent,
  SelectItem,
} from "@quan-erp/shared-ui";

<Select>
  <SelectTrigger>
    <SelectValue placeholder="Pick one" />
  </SelectTrigger>
  <SelectContent>
    <SelectItem value="a">Option A</SelectItem>
  </SelectContent>
</Select>

Shadcn — Select

Native Select

Styled native HTML select when you need a lightweight native control.

TSXNative Select

import { NativeSelect } from "@quan-erp/shared-ui";

Shadcn — Native Select

Switch

Toggle switch for on/off settings.

TSXSwitch

import { Switch } from "@quan-erp/shared-ui";

<Switch checked={enabled} onCheckedChange={setEnabled} />

Shadcn — Switch

Slider

Range / value slider input.

TSXSlider

import { Slider } from "@quan-erp/shared-ui";

Shadcn — Slider

Label

Accessible form label. Inside the Form stack prefer FormLabel.

TSXLabel

import { Label } from "@quan-erp/shared-ui";

<Label htmlFor="email">Email</Label>

Shadcn — Label

Field

Layout helper for label + control + description. Prefer FormField / FormMessage for validated forms.

For admin/public forms with validation, use the Forms page stack instead

TSXField

import { Field } from "@quan-erp/shared-ui";

Shadcn — Field

Form

Shadcn Form primitives (Form, FormField, FormItem, FormLabel, FormControl, FormMessage, FormDescription). Quan ERP standardizes on react-hook-form + zod — see the Forms page.

See Forms under UI Components for the required Zod + FormMessage pattern

TSXForm

import {
  Form,
  FormField,
  FormItem,
  FormLabel,
  FormControl,
  FormMessage,
  FormDescription,
} from "@quan-erp/shared-ui";

Shadcn — Form

Calendar

Date calendar grid. Quan ERP also ships Calendar wrappers (popover / drawer / automatic) — see the Calendar page.

TSXCalendar

import { Calendar } from "@quan-erp/shared-ui";

Shadcn — Calendar

Date Picker

Input + calendar composition for picking dates. Prefer shared Calendar helpers when available.

TSXDate Picker

import {
  Calendar,
  Popover,
  PopoverContent,
  PopoverTrigger,
  Button,
} from "@quan-erp/shared-ui";

Shadcn — Date Picker

Combobox

Searchable select built from Popover + Command.

TSXCombobox

import {
  Command,
  Popover,
  Button,
} from "@quan-erp/shared-ui";

Shadcn — Combobox