Label

import { Label } from "@grassroot/ui-react";
 
export default function LabelDemo() {
  return (
    <div style={{ display: "flex", flexDirection: "column", gap: "14px" }}>
      <Label htmlFor="react-email" required>
        Work email
      </Label>
      <input id="react-email" placeholder="you@grassroot.sh" />
    </div>
  );
}

<script setup lang="ts">
import { Label } from "@grassroot/ui-vue";
</script>
 
<template>
  <div style="display: flex; flex-direction: column; gap: 14px">
    <Label for="vue-email" required>Work email</Label>
    <input id="vue-email" placeholder="you@grassroot.sh" />
  </div>
</template>

import { Component } from "@angular/core";
import { GrassrootLabel } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-label-demo",
  standalone: true,
  imports: [GrassrootLabel],
  template: `
    <div style="display:flex;flex-direction:column;gap:14px">
      <grassroot-label for="angular-email" [required]="true">Work email</grassroot-label>
      <input id="angular-email" placeholder="you@grassroot.sh" />
    </div>
  `,
})
export class LabelDemoComponent {}
 
export default LabelDemoComponent;

<script lang="ts">
  import { Label } from "@grassroot/ui-svelte";
</script>
 
<div style="display:flex;flex-direction:column;gap:14px">
  <Label for="svelte-email" required>Work email</Label>
  <input id="svelte-email" placeholder="you@grassroot.sh" />
</div>

/** @jsxImportSource solid-js */
import { Label } from "@grassroot/ui-solid";
 
export default function LabelDemo() {
  return (
    <div style="display:flex;flex-direction:column;gap:14px">
      <Label for="solid-email" required>
        Work email
      </Label>
      <input id="solid-email" placeholder="you@grassroot.sh" />
    </div>
  );
}