Field

"use client";
 
import type { ComponentPropsWithoutRef } from "react";
 
import { Field, Input } from "@optiaxiom/react";
 
export function App({
  description,
  error,
  label = "Input label",
  required = false,
}: Pick<
  ComponentPropsWithoutRef<typeof Field>,
  "description" | "error" | "label" | "required"
>) {
  return (
    <Field
      description={description}
      error={error}
      label={label}
      required={required}
    >
      <Input placeholder="Enter text..." />
    </Field>
  );
}

import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field label="Input label" required>
      <Input placeholder="Enter text..." />
    </Field>
  );
}

import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field description="Input description" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field error="Field is required" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

import { Field, Textarea } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field description="Shown on the card" label="Summary" showCount w="384">
      <Textarea maxLength={120} placeholder="Enter a summary..." />
    </Field>
  );
}

import { Field, Input } from "@optiaxiom/react";
 
export function App() {
  return (
    <Field info="This is additional information" label="Input label">
      <Input placeholder="Enter text..." />
    </Field>
  );
}

import { Field, Group, Input, Link } from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Field
        description={
          <>
            Read our{" "}
            <Link external href="#">
              privacy policy
            </Link>{" "}
            for more information.
          </>
        }
        label="Email address"
      >
        <Input placeholder="you@example.com" type="email" />
      </Field>
      <Field
        error={
          <>
            Password must be at least <strong>8 characters</strong> and include
            a number.
          </>
        }
        label="Password"
      >
        <Input placeholder="Enter password" type="password" />
      </Field>
    </Group>
  );
}

import {
  Field,
  Group,
  Select,
  SelectContent,
  SelectTrigger,
  Textarea,
} from "@optiaxiom/react";
 
export function App() {
  return (
    <Group flexDirection="column" gap="16">
      <Field description="Share your thoughts with us." label="Message">
        <Textarea placeholder="Enter your message..." rows={3} />
      </Field>
      <Field label="Country" required>
        <Select
          options={[
            { label: "United States", value: "us" },
            { label: "United Kingdom", value: "uk" },
            { label: "Canada", value: "ca" },
          ]}
        >
          <SelectTrigger placeholder="Select a country" />
          <SelectContent />
        </Select>
      </Field>
    </Group>
  );
}

"use client";
 
import { Field, Group, Input } from "@optiaxiom/react";
import { useState } from "react";
 
export function App() {
  const [email, setEmail] = useState("");
  const [password, setPassword] = useState("");
 
  const emailError =
    email && !email.includes("@") ? "Please enter a valid email" : undefined;
  const passwordError =
    password && password.length < 8
      ? "Password must be at least 8 characters"
      : undefined;
 
  return (
    <Group flexDirection="column" gap="16">
      <Field
        description="We'll never share your email with anyone else."
        error={emailError}
        label="Email address"
        required
      >
        <Input
          onChange={(e) => setEmail(e.target.value)}
          placeholder="you@example.com"
          type="email"
          value={email}
        />
      </Field>
      <Field
        description="Must be at least 8 characters"
        error={passwordError}
        info="Choose a strong password to protect your account"
        label="Password"
        required
      >
        <Input
          onChange={(e) => setPassword(e.target.value)}
          placeholder="Enter password"
          type="password"
          value={password}
        />
      </Field>
    </Group>
  );
}