{"name":"field","title":"Field","description":"Validation-library-agnostic form field primitives — combine labels, controls and help text to compose accessible, groupable form fields.","installCommand":"bunx marko-ui add field -y","usageTags":"<Field>, <FieldLabel>, <FieldDescription>","importSnippet":"import Field from \"@/components/ui/field/field.marko\";\nimport FieldLabel from \"@/components/ui/field/field-label.marko\";\nimport FieldDescription from \"@/components/ui/field/field-description.marko\";\nimport TextInput from \"@/components/ui/input/input.marko\";","usageSnippet":"<Field>\n  <FieldLabel for=\"name\">Full name</FieldLabel>\n  <TextInput id=\"name\" autocomplete=\"off\" placeholder=\"Evil Rabbit\"/>\n  <FieldDescription>This appears on invoices and emails.</FieldDescription>\n</Field>","tags":["Field","FieldFieldContent","FieldFieldDescription","FieldFieldError","FieldFieldGroup","FieldFieldLabel","FieldFieldLegend","FieldFieldSeparator","FieldFieldSet","FieldFieldTitle"],"parts":[],"props":[{"name":"disabled","type":"boolean","required":false,"description":"Sets `data-disabled`, dimming the label and title."},{"name":"invalid","type":"boolean","required":false,"description":"Marks the field as invalid. Sets `data-invalid` on the wrapper, which every\ndescendant part restyles against via `group-data-*` selectors. The matching\n`aria-invalid` belongs on the control itself."},{"name":"orientation","type":"'horizontal' | 'vertical' | 'responsive' | null | undefined","required":false,"default":"vertical"}],"events":[],"keyboard":[],"accessibilityNotes":["`FieldSet` and `FieldLegend` keep related controls grouped for keyboard and assistive-technology users.","`Field` renders `role=\"group\"` so nested controls inherit labeling from `FieldLabel` and `FieldLegend` when combined.","Apply `FieldSeparator` sparingly so screen reader users encounter clear section boundaries.","Set `invalid` on `Field` for the visual error state, and pair it with `aria-invalid` on the control itself — the `invalid` prop alone does not add `aria-invalid`.","Render `FieldError` immediately after the control (or inside `FieldContent`) and reference it from the control's `aria-describedby` so assistive technology announces the error with the field."],"examples":[{"id":"field-demo","title":"Default","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field class=\"max-w-sm\">\n  <FieldLabel for=\"field-default-email\">Email</FieldLabel>\n  <TextInput id=\"field-default-email\" type=\"email\" placeholder=\"you@example.com\"/>\n  <FieldDescription>We'll never share your email.</FieldDescription>\n</Field>","description":"A field pairs a label, control and helper text via matching ids."},{"id":"field-invalid","title":"Invalid","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldError from \"@marko-ui/shadcn/ui/field/field-error.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field class=\"max-w-sm\" invalid>\n  <FieldLabel for=\"field-invalid-username\">Username</FieldLabel>\n  <TextInput\n    id=\"field-invalid-username\"\n    value=\"taken-name\"\n    aria-invalid=\"true\"\n    aria-describedby=\"field-invalid-username-error\"\n  />\n  <FieldError id=\"field-invalid-username-error\" errors=\"This username is already taken.\"/>\n</Field>","description":"Pass `invalid` to `Field` to switch the whole block into an error state, and `aria-invalid` on the control itself.","essential":true},{"id":"field-multiple-errors","title":"Multiple errors","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldError from \"@marko-ui/shadcn/ui/field/field-error.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field class=\"max-w-sm\" invalid>\n  <FieldLabel for=\"field-multi-password\">Password</FieldLabel>\n  <TextInput\n    id=\"field-multi-password\"\n    type=\"password\"\n    value=\"abc\"\n    aria-invalid=\"true\"\n    aria-describedby=\"field-multi-password-error\"\n  />\n  <FieldError\n    id=\"field-multi-password-error\"\n    errors=[\n      { message: \"Password must be at least 8 characters.\" },\n      { message: \"Password must contain a number.\" },\n    ]\n  />\n</Field>","description":"`FieldError` accepts a list of errors and renders them as a bulleted list.","essential":true},{"id":"field-input","title":"Input","source":"import FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<div class=\"w-full max-w-md\">\n  <FieldGroup>\n    <Field>\n      <FieldLabel for=\"field-input-username\">Username</FieldLabel>\n      <TextInput id=\"field-input-username\" type=\"text\" placeholder=\"Max Leiter\"/>\n      <FieldDescription>Choose a unique username for your account.</FieldDescription>\n    </Field>\n    <Field>\n      <FieldLabel for=\"field-input-password\">Password</FieldLabel>\n      <FieldDescription>Must be at least 8 characters long.</FieldDescription>\n      <TextInput id=\"field-input-password\" type=\"password\" placeholder=\"••••••••\"/>\n    </Field>\n  </FieldGroup>\n</div>","description":"Pair `Field` with `Input` for text and password controls."},{"id":"field-textarea","title":"Textarea","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<div class=\"w-full max-w-md\">\n  <Field>\n    <FieldLabel for=\"field-textarea-feedback\">Feedback</FieldLabel>\n    <Textarea id=\"field-textarea-feedback\" placeholder=\"Your feedback helps us improve...\" rows=4/>\n    <FieldDescription>Share your thoughts about our service.</FieldDescription>\n  </Field>\n</div>","description":"Pair `Field` with `Textarea` for multi-line input."},{"id":"field-select","title":"Select","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport Select from \"@marko-ui/shadcn/ui/select/select.marko\";\n\nstatic const departments = [\n  { value: \"engineering\", label: \"Engineering\" },\n  { value: \"design\", label: \"Design\" },\n  { value: \"marketing\", label: \"Marketing\" },\n  { value: \"sales\", label: \"Sales\" },\n  { value: \"support\", label: \"Customer Support\" },\n  { value: \"hr\", label: \"Human Resources\" },\n  { value: \"finance\", label: \"Finance\" },\n  { value: \"operations\", label: \"Operations\" },\n];\n\n<Field class=\"w-full max-w-md\">\n  <Select items=departments label=\"Department\" placeholder=\"Choose department\"/>\n  <FieldDescription>Select your department or area of work.</FieldDescription>\n</Field>","description":"`Select` renders its own accessible label (via `label=`), so it pairs directly with `Field` — no separate `FieldLabel` needed."},{"id":"field-slider","title":"Slider","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldTitle from \"@marko-ui/shadcn/ui/field/field-title.marko\";\nimport Slider from \"@marko-ui/shadcn/ui/slider/slider.marko\";\n\n<let/range=[200, 800]/>\n\n<div class=\"w-full max-w-md\">\n  <Field>\n    <FieldTitle>Price Range</FieldTitle>\n    <FieldDescription>\n      Set your budget range ($<span class=\"font-medium tabular-nums\">${range[0]}</span> -\n      $<span class=\"font-medium tabular-nums\">${range[1]}</span>).\n    </FieldDescription>\n    <Slider\n      class=\"mt-2 w-full\"\n      value=range\n      valueChange(value) { range = value; }\n      max=1000\n      min=0\n      step=10\n      aria-label=[\"Minimum price\", \"Maximum price\"]\n    />\n  </Field>\n</div>","description":"Pair `Field` with `Slider` and reflect the live value in `FieldDescription`."},{"id":"field-horizontal","title":"Horizontal orientation","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldTitle from \"@marko-ui/shadcn/ui/field/field-title.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<Field class=\"max-w-sm\" orientation=\"horizontal\">\n  <FieldContent>\n    <FieldTitle>Email notifications</FieldTitle>\n    <FieldDescription>Send an email when someone mentions you.</FieldDescription>\n  </FieldContent>\n\n  <TextInput id=\"field-horizontal-toggle\" type=\"checkbox\" aria-label=\"Email notifications\" class=\"size-6 shrink-0\"/>\n</Field>","description":"Set `orientation=\"horizontal\"` to align the control beside the label. Pair with `FieldContent` to keep descriptions aligned."},{"id":"field-fieldset-basic","title":"Field set with legend and separator","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldSeparator from \"@marko-ui/shadcn/ui/field/field-separator.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<FieldSet class=\"max-w-sm\">\n  <FieldLegend>Profile</FieldLegend>\n  <FieldDescription>This information is shown on your public profile.</FieldDescription>\n  <FieldGroup>\n    <Field>\n      <FieldLabel for=\"field-set-name\">Display name</FieldLabel>\n      <TextInput id=\"field-set-name\" placeholder=\"Ada Lovelace\"/>\n    </Field>\n    <FieldSeparator>or</FieldSeparator>\n    <Field>\n      <FieldLabel for=\"field-set-handle\">Handle</FieldLabel>\n      <TextInput id=\"field-set-handle\" placeholder=\"@ada\"/>\n    </Field>\n  </FieldGroup>\n</FieldSet>","description":"Group related fields with `FieldSet` and `FieldGroup`, and divide sections with `FieldSeparator`."},{"id":"field-fieldset","title":"Nested field groups","source":"import FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\n\n<div class=\"w-full max-w-md space-y-6\">\n  <FieldSet>\n    <FieldLegend>Address Information</FieldLegend>\n    <FieldDescription>We need your address to deliver your order.</FieldDescription>\n    <FieldGroup>\n      <Field>\n        <FieldLabel for=\"fieldset-demo-street\">Street Address</FieldLabel>\n        <TextInput id=\"fieldset-demo-street\" type=\"text\" placeholder=\"123 Main St\"/>\n      </Field>\n      <div class=\"grid grid-cols-2 gap-4\">\n        <Field>\n          <FieldLabel for=\"fieldset-demo-city\">City</FieldLabel>\n          <TextInput id=\"fieldset-demo-city\" type=\"text\" placeholder=\"New York\"/>\n        </Field>\n        <Field>\n          <FieldLabel for=\"fieldset-demo-zip\">Postal Code</FieldLabel>\n          <TextInput id=\"fieldset-demo-zip\" type=\"text\" placeholder=\"90502\"/>\n        </Field>\n      </div>\n    </FieldGroup>\n  </FieldSet>\n</div>","description":"Combine `FieldSet`, `FieldLegend` and a grid of `Field`s to build a labeled section like an address form."},{"id":"field-checkbox","title":"Checkbox","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSeparator from \"@marko-ui/shadcn/ui/field/field-separator.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\n\n<div class=\"w-full max-w-md\">\n  <FieldGroup>\n    <FieldSet>\n      <FieldLegend variant=\"label\">Show these items on the desktop</FieldLegend>\n      <FieldDescription>Select the items you want to show on the desktop.</FieldDescription>\n      <FieldGroup class=\"gap-3\">\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-checkbox-hard-disks\" defaultChecked class=\"font-normal\">Hard disks</Checkbox>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-checkbox-external-disks\" class=\"font-normal\">External disks</Checkbox>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-checkbox-cds-dvds\" class=\"font-normal\">CDs, DVDs, and iPods</Checkbox>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-checkbox-connected-servers\" class=\"font-normal\">Connected servers</Checkbox>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n    <FieldSeparator/>\n\n    <Field orientation=\"horizontal\">\n      <Checkbox id=\"field-checkbox-sync-folders\" defaultChecked>\n        <span class=\"sr-only\">Sync Desktop & Documents folders</span>\n      </Checkbox>\n      <FieldContent>\n        <FieldLabel for=\"field-checkbox-sync-folders\">Sync Desktop & Documents folders</FieldLabel>\n        <FieldDescription>\n          Your Desktop & Documents folders are being synced with iCloud Drive. You can access them from other\n          devices.\n        </FieldDescription>\n      </FieldContent>\n    </Field>\n  </FieldGroup>\n</div>","description":"`Checkbox` renders its own root `<label>` around the hidden input, so label text lives in its `content` body rather than a separate `FieldLabel`."},{"id":"field-radio","title":"Radio","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\nstatic const PLANS = [\n  { value: \"monthly\", label: \"Monthly ($9.99/month)\" },\n  { value: \"yearly\", label: \"Yearly ($99.99/year)\" },\n  { value: \"lifetime\", label: \"Lifetime ($299.99)\" },\n];\n\n<div class=\"w-full max-w-md\">\n  <FieldSet>\n    <FieldLegend variant=\"label\">Subscription Plan</FieldLegend>\n    <FieldDescription>Yearly and lifetime plans offer significant savings.</FieldDescription>\n    <RadioGroup items=PLANS defaultValue=\"monthly\" class=\"gap-3\"/>\n  </FieldSet>\n</div>","description":"`RadioGroup` renders every option as its own labeled item — pass `items=` and describe the group with `FieldSet`/`FieldLabel`."},{"id":"field-switch","title":"Switch","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport Switch from \"@marko-ui/shadcn/ui/switch/switch.marko\";\n\n<div class=\"w-full max-w-md\">\n  <Field orientation=\"horizontal\">\n    <FieldContent>\n      <FieldLabel for=\"field-switch-2fa\">Multi-factor authentication</FieldLabel>\n      <FieldDescription>\n        Enable multi-factor authentication. If you do not have a two-factor device, you can use a one-time code\n        sent to your email.\n      </FieldDescription>\n    </FieldContent>\n\n    <Switch id=\"field-switch-2fa\">\n      <span class=\"sr-only\">Multi-factor authentication</span>\n    </Switch>\n  </Field>\n</div>","description":"Pair `Field` with `Switch`, keeping the label and description in `FieldContent`."},{"id":"field-choice-card","title":"Choice card","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport FieldTitle from \"@marko-ui/shadcn/ui/field/field-title.marko\";\nimport RadioGroup from \"@marko-ui/shadcn/ui/radio-group/radio-group.marko\";\n\n<div class=\"w-full max-w-md\">\n  <FieldGroup>\n    <FieldSet>\n      <FieldLegend variant=\"label\">Compute Environment</FieldLegend>\n      <FieldDescription>Select the compute environment for your cluster.</FieldDescription>\n      <RadioGroup defaultValue=\"kubernetes\" class=\"gap-3\">\n        <@item value=\"kubernetes\">\n          <FieldContent>\n            <FieldTitle>Kubernetes</FieldTitle>\n            <FieldDescription>Run GPU workloads on a K8s configured cluster.</FieldDescription>\n          </FieldContent>\n        </@item>\n        <@item value=\"vm\">\n          <FieldContent>\n            <FieldTitle>Virtual Machine</FieldTitle>\n            <FieldDescription>Access a VM configured cluster to run GPU workloads.</FieldDescription>\n          </FieldContent>\n        </@item>\n      </RadioGroup>\n    </FieldSet>\n  </FieldGroup>\n</div>","description":"Render rich title/description content inside a `RadioGroup` item's `content` slot to build a selectable card group. Each item is one root row in a fixed order — indicator, hidden input, then that `content` — so the indicator cannot be moved to trail the text the way upstream's `FieldLegend`/`Field` wrapper arrangement does it."},{"id":"field-group","title":"Field group","source":"import Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSeparator from \"@marko-ui/shadcn/ui/field/field-separator.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\n\n<div class=\"w-full max-w-md\">\n  <FieldGroup>\n    <FieldSet>\n      <FieldLegend>Responses</FieldLegend>\n      <FieldDescription>\n        Get notified when the assistant responds to requests that take time, like research or image generation.\n      </FieldDescription>\n      <FieldGroup data-slot=\"checkbox-group\" class=\"gap-3\">\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-group-push\" defaultChecked disabled class=\"font-normal\">Push notifications</Checkbox>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n    <FieldSeparator/>\n    <FieldSet>\n      <FieldLegend>Tasks</FieldLegend>\n      <FieldDescription>\n        Get notified when tasks you've created have updates. <a href=\"#\">Manage tasks</a>\n      </FieldDescription>\n      <FieldGroup data-slot=\"checkbox-group\" class=\"gap-3\">\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-group-push-tasks\" class=\"font-normal\">Push notifications</Checkbox>\n        </Field>\n        <Field orientation=\"horizontal\">\n          <Checkbox id=\"field-group-email-tasks\" class=\"font-normal\">Email notifications</Checkbox>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </FieldGroup>\n</div>","description":"Stack related `FieldSet`s inside one `FieldGroup`, dividing sections with `FieldSeparator`."},{"id":"field-signup","title":"Sign up — live validation","source":"import FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldError from \"@marko-ui/shadcn/ui/field/field-error.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\nexport type ValidatableControl = { validity: ValidityState; validationMessage: string; name: string };\n\nstatic function isValidatable(control: Element): control is Element & ValidatableControl {\n  return \"validity\" in control && \"validationMessage\" in control && \"name\" in control;\n}\n\n<const/messageFor=(control: ValidatableControl) => (control.validity.valid ? undefined : control.validationMessage)/>\n\n<let/errors=({} as Record<string, string[] | undefined>)/>\n<let/submitted=false/>\n\n<const/validateField=(control: HTMLInputElement) => {\n  const message = messageFor(control);\n  errors = { ...errors, [control.name]: message ? [message] : undefined };\n}/>\n\n<const/validateForm=(form: HTMLFormElement) => {\n  const next: Record<string, string[] | undefined> = {};\n  let valid = true;\n\n  for (const control of form.elements) {\n    if (!isValidatable(control) || !control.name) continue;\n    const message = messageFor(control);\n    if (message) {\n      next[control.name] = [message];\n      valid = false;\n    }\n  }\n\n  errors = next;\n  return valid;\n}/>\n\n<form\n  novalidate\n  class=\"w-full max-w-sm\"\n  onSubmit(event, form) {\n    event.preventDefault();\n    submitted = validateForm(form);\n  }\n>\n  <FieldSet>\n    <FieldLegend>Create an account</FieldLegend>\n    <FieldDescription>All fields are required.</FieldDescription>\n    <FieldGroup>\n      <Field invalid=!!errors.username>\n        <FieldLabel for=\"signup-username\">Username</FieldLabel>\n        <TextInput\n          id=\"signup-username\"\n          name=\"username\"\n          required\n          minlength=3\n          maxlength=20\n          pattern=\"[A-Za-z0-9_]+\"\n          autocomplete=\"username\"\n          aria-invalid=(errors.username ? \"true\" : undefined)\n          aria-describedby=(errors.username ? \"signup-username-error\" : \"signup-username-description\")\n          onBlur(event, control) { validateField(control); }\n        />\n        <FieldDescription id=\"signup-username-description\">\n          3-20 characters: letters, numbers and underscores.\n        </FieldDescription>\n        <FieldError id=\"signup-username-error\" errors=errors.username/>\n      </Field>\n\n      <Field invalid=!!errors.email>\n        <FieldLabel for=\"signup-email\">Email</FieldLabel>\n        <TextInput\n          id=\"signup-email\"\n          name=\"email\"\n          type=\"email\"\n          required\n          autocomplete=\"email\"\n          aria-invalid=(errors.email ? \"true\" : undefined)\n          aria-describedby=(errors.email ? \"signup-email-error\" : undefined)\n          onBlur(event, control) { validateField(control); }\n        />\n        <FieldError id=\"signup-email-error\" errors=errors.email/>\n      </Field>\n\n      <Field invalid=!!errors.password>\n        <FieldLabel for=\"signup-password\">Password</FieldLabel>\n        <TextInput\n          id=\"signup-password\"\n          name=\"password\"\n          type=\"password\"\n          required\n          minlength=8\n          pattern=\".*[0-9].*\"\n          autocomplete=\"new-password\"\n          aria-invalid=(errors.password ? \"true\" : undefined)\n          aria-describedby=(errors.password ? \"signup-password-error\" : \"signup-password-description\")\n          onBlur(event, control) { validateField(control); }\n        />\n        <FieldDescription id=\"signup-password-description\">\n          At least 8 characters and one number.\n        </FieldDescription>\n        <FieldError id=\"signup-password-error\" errors=errors.password/>\n      </Field>\n\n      <Button type=\"submit\">Create account</Button>\n\n      <if=submitted>\n        <p class=\"text-sm font-medium text-primary\">Account created. Welcome aboard!</p>\n      </if>\n    </FieldGroup>\n  </FieldSet>\n</form>","description":"Native `ValidityState` drives client-side validation with zero dependencies — it already understands `required`, `type=email`, `minlength` and `pattern`."},{"id":"field-rtl","title":"RTL","source":"import Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSeparator from \"@marko-ui/shadcn/ui/field/field-separator.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Checkbox from \"@marko-ui/shadcn/ui/checkbox/checkbox.marko\";\nimport Button from \"@marko-ui/shadcn/ui/button/button.marko\";\n\n<div dir=\"rtl\" class=\"w-full max-w-md py-6\">\n  <form>\n    <FieldGroup>\n      <FieldSet>\n        <FieldLegend>طريقة الدفع</FieldLegend>\n        <FieldDescription>جميع المعاملات آمنة ومشفرة</FieldDescription>\n        <FieldGroup>\n          <Field>\n            <FieldLabel for=\"field-rtl-card-name\">الاسم على البطاقة</FieldLabel>\n            <TextInput id=\"field-rtl-card-name\" placeholder=\"Evil Rabbit\" required dir=\"rtl\"/>\n          </Field>\n          <Field>\n            <FieldLabel for=\"field-rtl-card-number\">رقم البطاقة</FieldLabel>\n            <TextInput id=\"field-rtl-card-number\" placeholder=\"1234 5678 9012 3456\" required dir=\"rtl\"/>\n            <FieldDescription>أدخل رقم البطاقة المكون من 16 رقمًا</FieldDescription>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <FieldSeparator/>\n      <FieldSet>\n        <FieldLegend>عنوان الفوترة</FieldLegend>\n        <FieldDescription>عنوان الفوترة المرتبط بطريقة الدفع الخاصة بك</FieldDescription>\n        <FieldGroup>\n          <Field orientation=\"horizontal\">\n            <Checkbox id=\"field-rtl-same-as-shipping\" defaultChecked class=\"font-normal\">نفس عنوان الشحن</Checkbox>\n          </Field>\n        </FieldGroup>\n      </FieldSet>\n      <Field orientation=\"horizontal\">\n        <Button type=\"submit\">إرسال</Button>\n        <Button type=\"button\" variant=\"outline\">إلغاء</Button>\n      </Field>\n    </FieldGroup>\n  </form>\n</div>","description":"Field's layout uses Tailwind logical properties, so it restyles correctly under `dir=\"rtl\"` with no component changes."},{"id":"field-responsive","title":"Responsive layout","source":"import Button from \"@marko-ui/shadcn/ui/button/button.marko\";\nimport Field from \"@marko-ui/shadcn/ui/field/field.marko\";\nimport FieldContent from \"@marko-ui/shadcn/ui/field/field-content.marko\";\nimport FieldDescription from \"@marko-ui/shadcn/ui/field/field-description.marko\";\nimport FieldGroup from \"@marko-ui/shadcn/ui/field/field-group.marko\";\nimport FieldLabel from \"@marko-ui/shadcn/ui/field/field-label.marko\";\nimport FieldLegend from \"@marko-ui/shadcn/ui/field/field-legend.marko\";\nimport FieldSeparator from \"@marko-ui/shadcn/ui/field/field-separator.marko\";\nimport FieldSet from \"@marko-ui/shadcn/ui/field/field-set.marko\";\nimport TextInput from \"@marko-ui/shadcn/ui/input/input.marko\";\nimport Textarea from \"@marko-ui/shadcn/ui/textarea/textarea.marko\";\n\n<div class=\"w-full max-w-4xl\">\n  <form>\n    <FieldSet>\n      <FieldLegend>Profile</FieldLegend>\n      <FieldDescription>Fill in your profile information.</FieldDescription>\n      <FieldSeparator/>\n      <FieldGroup>\n        <Field orientation=\"responsive\">\n          <FieldContent>\n            <FieldLabel for=\"field-responsive-name\">Name</FieldLabel>\n            <FieldDescription>Provide your full name for identification</FieldDescription>\n          </FieldContent>\n          <TextInput id=\"field-responsive-name\" placeholder=\"Evil Rabbit\" required/>\n        </Field>\n        <FieldSeparator/>\n        <Field orientation=\"responsive\">\n          <FieldContent>\n            <FieldLabel for=\"field-responsive-message\">Message</FieldLabel>\n            <FieldDescription>\n              You can write your message here. Keep it short, preferably under 100 characters.\n            </FieldDescription>\n          </FieldContent>\n          <Textarea\n            id=\"field-responsive-message\"\n            placeholder=\"Hello, world!\"\n            required\n            class=\"min-h-[100px] resize-none sm:min-w-[300px]\"\n          />\n        </Field>\n        <FieldSeparator/>\n        <Field orientation=\"responsive\">\n          <Button type=\"submit\">Submit</Button>\n          <Button type=\"button\" variant=\"outline\">Cancel</Button>\n        </Field>\n      </FieldGroup>\n    </FieldSet>\n  </form>\n</div>","description":"Set `orientation=\"responsive\"` to stack vertically on narrow containers and switch to a horizontal row once the `FieldGroup`'s `@container` query matches — apply `@md/field-group:` classes on `FieldGroup` to tune the breakpoint."}],"importInstallCommand":"bun add @marko-ui/shadcn marko-zag","requires":["input"],"nativeAttributes":"div","subcomponents":[{"name":"field-content","props":[],"nativeAttributes":"div"},{"name":"field-description","props":[],"nativeAttributes":"p"},{"name":"field-error","props":[{"name":"errors","type":"FieldErrorLike | readonly FieldErrorLike[]","required":false,"description":"One error, or a list of them. Each entry may be a plain message string or any\nobject carrying a `message` — the shape of a Standard Schema issue, so output\nfrom valibot, zod or arktype passes through unchanged. Duplicates are removed.\n\nIgnored when body content is provided."}],"nativeAttributes":"div"},{"name":"field-group","props":[],"nativeAttributes":"div"},{"name":"field-label","props":[],"nativeAttributes":"label"},{"name":"field-legend","props":[{"name":"variant","type":"'label' | 'legend'","required":false}],"nativeAttributes":"legend"},{"name":"field-separator","props":[],"nativeAttributes":"div"},{"name":"field-set","props":[],"nativeAttributes":"fieldset"},{"name":"field-title","props":[],"nativeAttributes":"div"}]}