Input

import { Input } from "@grassroot/ui-react";
import * as React from "react";
 
export default function InputDemo() {
  const [name, setName] = React.useState("ledger-api");
 
  return (
    <div className="flex flex-col gap-3.5">
      <Input
        label="Service name"
        hint="Lowercase, hyphen-separated."
        value={name}
        onChange={(e) => setName(e.target.value)}
      />
      <Input label="Webhook URL" error="Must be a valid HTTPS URL." />
    </div>
  );
}

<script setup lang="ts">
import { ref } from "vue";
import { Input } from "@grassroot/ui-vue";
 
const name = ref("ledger-api");
</script>
 
<template>
  <div class="flex flex-col gap-3.5">
    <Input v-model="name" label="Service name" hint="Lowercase, hyphen-separated." />
    <Input label="Webhook URL" error="Must be a valid HTTPS URL." />
  </div>
</template>

import { Component, signal } from "@angular/core";
import { GrassrootInput } from "@grassroot/ui-angular";
 
@Component({
  selector: "app-input-demo",
  standalone: true,
  imports: [GrassrootInput],
  host: { style: "display: contents" },
  template: `
    <div class="flex flex-col gap-3.5">
      <grassroot-input
        label="Service name"
        hint="Lowercase, hyphen-separated."
        [value]="name()"
        (valueChange)="name.set($event)"
      />
      <grassroot-input label="Webhook URL" error="Must be a valid HTTPS URL." />
    </div>
  `,
})
export class InputDemoComponent {
  readonly name = signal("ledger-api");
}
 
export default InputDemoComponent;

<script lang="ts">
  import { Input } from "@grassroot/ui-svelte";
 
  let name = $state("ledger-api");
</script>
 
<div class="flex flex-col gap-3.5">
  <Input
    label="Service name"
    hint="Lowercase, hyphen-separated."
    value={name}
    oninput={(event) => (name = event.currentTarget.value)}
  />
  <Input label="Webhook URL" error="Must be a valid HTTPS URL." />
</div>

/** @jsxImportSource solid-js */
import { createSignal } from "solid-js";
import { Input } from "@grassroot/ui-solid";
 
export default function InputDemo() {
  const [name, setName] = createSignal("ledger-api");
 
  return (
    <div class="flex flex-col gap-3.5">
      <Input
        label="Service name"
        hint="Lowercase, hyphen-separated."
        value={name()}
        onChange={(e) => setName(e.target.value)}
      />
      <Input label="Webhook URL" error="Must be a valid HTTPS URL." />
    </div>
  );
}