폼

import { useState } from "react";

import {
    NxButton,
    NxCheckbox,
    NxCombobox,
    NxDatePicker,
    NxDateRangePicker,
    NxFieldGroup,
    NxFieldLegend,
    NxFieldset,
    NxFileDropzone,
    NxFormField,
    NxFormSection,
    NxRadio,
    NxRadioGroup,
    NxSearchField,
    NxSelect,
    NxTextArea,
    NxTextInput,
} from "@nexia/sdk/host";

const TEAM_OPTIONS = [
    { value: "operations", label: "Operations" },
    { value: "quality", label: "Quality" },
    { value: "maintenance", label: "Maintenance" },
] as const;

export function FormsExample() {
    const [search, setSearch] = useState("");
    const [team, setTeam] = useState<string | null>("operations");
    const [owner, setOwner] = useState<string | null>("min-kim");
    const [fileName, setFileName] = useState<string | null>(null);
    const [cadence, setCadence] = useState("weekly");
    const [reviewDate, setReviewDate] = useState<string | null>("2026-09-15");
    const [reportingPeriod, setReportingPeriod] = useState<{
        start: string | null;
        end: string | null;
    }>({
        start: "2026-09-01",
        end: "2026-09-30",
    });

    return (
        <NxFormSection
            placement="footer"
            spacing="stack"
            actions={<NxButton type="submit">Save</NxButton>}
            onSubmit={(event) => event.preventDefault()}
        >
            <NxFieldGroup className="grid gap-5 lg:grid-cols-2">
                <NxFormField
                    label="Workspace name"
                    help="Use a name your team will recognize."
                    required
                >
                    {({ id, describedBy, invalid }) => (
                        <NxTextInput
                            id={id}
                            aria-describedby={describedBy}
                            invalid={invalid}
                            defaultValue="Operations"
                        />
                    )}
                </NxFormField>
                <NxFormField label="Description">
                    {({ id, describedBy, invalid }) => (
                        <NxTextArea
                            id={id}
                            aria-describedby={describedBy}
                            invalid={invalid}
                            rows={3}
                            defaultValue="Daily production coordination"
                        />
                    )}
                </NxFormField>
                <NxSearchField
                    value={search}
                    onChange={setSearch}
                    placeholder="Search records"
                    aria-label="Search records"
                />
                <NxSelect
                    value={team}
                    options={TEAM_OPTIONS}
                    onChange={setTeam}
                    placeholder="Select a team"
                    ariaLabel="Team"
                    fullWidth
                />
                <NxCombobox
                    value={owner}
                    onChange={setOwner}
                    options={[
                        {
                            value: "min-kim",
                            label: "Min Kim",
                            meta: "Operations",
                        },
                        {
                            value: "sora-choi",
                            label: "Sora Choi",
                            meta: "Quality",
                        },
                    ]}
                    placeholder="Select an owner"
                    ariaLabel="Owner"
                    searchPlaceholder="Search people"
                    fullWidth
                />
                <NxFileDropzone
                    accept=".csv"
                    onFile={(file) => setFileName(file.name)}
                    prompt="Drop a CSV file here"
                    browseLabel="Browse"
                    hint="Up to 10 MB"
                    selectedFileName={fileName}
                    inputLabel="Upload CSV"
                />
            </NxFieldGroup>
            <NxFieldset>
                <NxFieldLegend>Notifications</NxFieldLegend>
                <NxCheckbox
                    label="Email me when provisioning completes"
                    defaultChecked
                />
            </NxFieldset>
            <NxFieldset>
                <NxFieldLegend>Review cadence</NxFieldLegend>
                <NxRadioGroup
                    name="review-cadence"
                    value={cadence}
                    onChange={setCadence}
                    orientation="horizontal"
                    aria-label="Review cadence"
                >
                    <NxRadio value="weekly" label="Weekly" />
                    <NxRadio value="monthly" label="Monthly" />
                </NxRadioGroup>
            </NxFieldset>
            <NxFieldGroup className="grid gap-5 lg:grid-cols-2">
                <NxDatePicker
                    label="Next review"
                    value={reviewDate}
                    onChange={setReviewDate}
                    clearable
                />
                <NxDateRangePicker
                    label="Reporting period"
                    value={reportingPeriod}
                    onChange={setReportingPeriod}
                    clearable
                />
            </NxFieldGroup>
        </NxFormSection>
    );
}123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157