Field

import { inputControlClass } from "@grassroot/ui-core";
import { Field } from "@grassroot/ui-react";
 
export default function FieldDemo() {
  return (
    <div className="flex flex-col gap-3.5">
      <Field label="Repository" htmlFor="react-repo" hint="Owner/name of the GitHub repository.">
        <input
          id="react-repo"
          placeholder="grassroot/platform"
          className={inputControlClass(false, false)}
        />
      </Field>
      <Field label="Branch" htmlFor="react-branch" required error="That branch could not be found.">
        <input id="react-branch" placeholder="main" className={inputControlClass(false, true)} />
      </Field>
    </div>
  );
}

<script setup lang="ts">
import { inputControlClass } from "@grassroot/ui-core";
import { Field } from "@grassroot/ui-vue";
</script>
 
<template>
  <div class="flex flex-col gap-3.5">
    <Field label="Repository" html-for="vue-repo" hint="Owner/name of the GitHub repository.">
      <input id="vue-repo" placeholder="grassroot/platform" :class="inputControlClass(false, false)" />
    </Field>
    <Field label="Branch" html-for="vue-branch" required error="That branch could not be found.">
      <input id="vue-branch" placeholder="main" :class="inputControlClass(false, true)" />
    </Field>
  </div>
</template>

import { Component } from "@angular/core";
import { inputControlClass } from "@grassroot/ui-core";
import { GrassrootField } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-field-demo",
  standalone: true,
  imports: [GrassrootField],
  host: { style: "display: contents" },
  template: `
    <div class="flex flex-col gap-3.5">
      <grassroot-field
        label="Repository"
        htmlFor="angular-repo"
        hint="Owner/name of the GitHub repository."
      >
        <input id="angular-repo" placeholder="grassroot/platform" [class]="controlClass" />
      </grassroot-field>
      <grassroot-field
        label="Branch"
        htmlFor="angular-branch"
        [required]="true"
        error="That branch could not be found."
      >
        <input id="angular-branch" placeholder="main" [class]="errorControlClass" />
      </grassroot-field>
    </div>
  `,
})
export class FieldDemoComponent {
  protected readonly controlClass = inputControlClass(false, false);
  protected readonly errorControlClass = inputControlClass(false, true);
}
 
export default FieldDemoComponent;

<script lang="ts">
  import { inputControlClass } from "@grassroot/ui-core";
  import { Field } from "@grassroot/ui-svelte";
</script>
 
<div class="flex flex-col gap-3.5">
  <Field label="Repository" htmlFor="svelte-repo" hint="Owner/name of the GitHub repository.">
    <input id="svelte-repo" placeholder="grassroot/platform" class={inputControlClass(false, false)} />
  </Field>
  <Field label="Branch" htmlFor="svelte-branch" required error="That branch could not be found.">
    <input id="svelte-branch" placeholder="main" class={inputControlClass(false, true)} />
  </Field>
</div>

/** @jsxImportSource solid-js */
import { inputControlClass } from "@grassroot/ui-core";
import { Field } from "@grassroot/ui-solid";
 
export default function FieldDemo() {
  return (
    <div class="flex flex-col gap-3.5">
      <Field label="Repository" htmlFor="solid-repo" hint="Owner/name of the GitHub repository.">
        <input
          id="solid-repo"
          placeholder="grassroot/platform"
          class={inputControlClass(false, false)}
        />
      </Field>
      <Field label="Branch" htmlFor="solid-branch" required error="That branch could not be found.">
        <input id="solid-branch" placeholder="main" class={inputControlClass(false, true)} />
      </Field>
    </div>
  );
}