Field

import { Field } from "@grassroot/ui-react";
 
<Field label="Repository" htmlFor="repo" hint="Owner/name of the GitHub repository.">
  <input id="repo" placeholder="grassroot/platform" />
</Field>
<Field label="Branch" htmlFor="branch" required error="That branch could not be found.">
  <input id="branch" placeholder="main" />
</Field>

<script setup lang="ts">
import { Field } from "@grassroot/ui-vue";
</script>
 
<template>
  <Field
    label="Repository"
    html-for="repo"
    hint="Owner/name of the GitHub repository."
  >
    <input id="repo" placeholder="grassroot/platform" />
  </Field>
  <Field
    label="Branch"
    html-for="branch"
    required
    error="That branch could not be found."
  >
    <input id="branch" placeholder="main" />
  </Field>
</template>

import { Component } from "@angular/core";
import { GrassrootField } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-example",
  standalone: true,
  imports: [GrassrootField],
  template: `
    <grassroot-field
      label="Repository"
      htmlFor="repo"
      hint="Owner/name of the GitHub repository."
    >
      <input id="repo" placeholder="grassroot/platform" />
    </grassroot-field>
    <grassroot-field
      label="Branch"
      htmlFor="branch"
      [required]="true"
      error="That branch could not be found."
    >
      <input id="branch" placeholder="main" />
    </grassroot-field>
  `,
})
export class ExampleComponent {
}

<script lang="ts">
  import { Field } from "@grassroot/ui-svelte";
</script>
 
<Field
  label="Repository"
  htmlFor="repo"
  hint="Owner/name of the GitHub repository."
>
  <input id="repo" placeholder="grassroot/platform" />
</Field>
<Field
  label="Branch"
  htmlFor="branch"
  required
  error="That branch could not be found."
>
  <input id="branch" placeholder="main" />
</Field>

import { Field } from "@grassroot/ui-solid";
 
export function Example() {
  return (
    <>
      <Field
        label="Repository"
        htmlFor="repo"
        hint="Owner/name of the GitHub repository."
      >
        <input id="repo" placeholder="grassroot/platform" />
      </Field>
      <Field
        label="Branch"
        htmlFor="branch"
        required
        error="That branch could not be found."
      >
        <input id="branch" placeholder="main" />
      </Field>
    </>
  );
}