Input

v1.0.0

Text input field with label, helper, and error support.

Import

import { Input } from '@meteorack/sdk-react';

How To Use It

Use it for short text values in module settings, search fields, and lightweight forms.
Pair it with explicit save actions when the field should not update immediately on every keystroke.

Works Well With

Card Button Notice

Props

label?: string

Optional field label rendered above the input.

error?: string

Validation message that also marks the input as invalid.

hint?: string

Helper text shown below the input when no error is present.

...InputHTMLAttributes<HTMLInputElement>

Supports standard input props such as type, value, placeholder, required, and onChange.

Example

Input.tsx

import { useState } from 'react';
import { Input, Button } from '@meteorack/sdk-react';

export function WhiteLabelField() {
  const [brandName, setBrandName] = useState('');

  return (
    <div style={{ display: 'flex', flexDirection: 'column', gap: '12px' }}>
      <Input
        label="Brand Name"
        placeholder="My Agency"
        hint="Shown in the Meteorack admin shell."
        value={brandName}
        onChange={(e) => setBrandName(e.target.value)}
      />
      <Button variant="primary">Save</Button>
    </div>
  );
}

PreviousBadge NextSelect