Field

A field represents a text input element in a form. It supports properties like name, label, value, placeholder, disabled, and event handlers (onChange, onBlur, onFocus).

Usage

Example

import type { NubeSDK } from "@tiendanube/nube-sdk-types";
import { Field } from "@tiendanube/nube-sdk-jsx";

function MyComponent() {
  return (
    <Field
      name="email"
      label="Email"
      value="john@example.com"
      placeholder="Enter your email"
      onChange={() => {}}
      onBlur={() => {}}
      onFocus={() => {}}
    />
  );
}

export function App(nube: NubeSDK) {
  nube.send("ui:slot:set", () => ({
    ui: {
      slots: {
        after_line_items: <MyComponent />,
      },
    },
  }));
}

Event Handlers

The field component supports three event handlers that receive an object with the following properties:

onChange: (data: {
  type: "change";       // The type of event
  state: NubeSDKState;  // The current state of the SDK
  value?: string;       // The new value of the field
}) => void

onBlur: (data: {
  type: "blur";         // The type of event
  state: NubeSDKState;  // The current state of the SDK
  value?: string;       // The current value of the field
}) => void

onFocus: (data: {
  type: "focus";        // The type of event
  state: NubeSDKState;  // The current state of the SDK
  value?: string;       // The current value of the field
}) => void

Example usage:

Field with onChange handler

import type {
  NubeSDK,
  NubeComponentFieldEventHandler,
} from "@tiendanube/nube-sdk-types";
import { Field, Box, Text } from "@tiendanube/nube-sdk-jsx";

function MyComponent(nube: NubeSDK) {
  // Typed event handler for field
  const handleChange: NubeComponentFieldEventHandler = (event) => {
    // event.type is "change"
    // event.value is string (current field value)
    // event.state is the full NubeSDKState
    const fieldValue = event.value ?? "";

    console.log("Field value:", fieldValue);
  };

  return (
    <Box direction="col" gap={12}>
      <Text modifiers={["bold"]}>Contact Information</Text>

      <Field
        name="email"
        label="Email Address"
        onChange={handleChange}
      />
    </Box>
  );
}

export function App(nube: NubeSDK) {
  nube.send("ui:slot:set", () => ({
    ui: {
      slots: {
        after_line_items: MyComponent(nube),
      },
    },
  }));
}

Disabled Fields

Set disabled to prevent the user from interacting with the field. A disabled field is not editable and does not emit change, focus, or blur events, but its value is still displayed.

Disabled field with a default value

<Field
  name="email"
  label="Email"
  value="john@example.com"
  disabled
  onChange={() => {}}
/>

Properties

Property	Type	Required	Description
name	string	Yes	The name of the field, used to identify it in forms.
label	string	Yes	The label text displayed above the field.
value	string	No	The current value of the field input.
placeholder	string	No	Hint text displayed inside the field while it is empty.
disabled	boolean	No	Whether the field is disabled and cannot be interacted with.
mask	string	No	Format mask for the field input (e.g., "000.000.000-00" for CPF).
style	StyleSheet	No	Custom styles for the field.
autoFocus	boolean	No	Whether the field should automatically receive focus when mounted.
onChange	NubeComponentFieldEventHandler	No	Function called when the field value changes.
onBlur	NubeComponentFieldEventHandler	No	Function called when the field loses focus.
onFocus	NubeComponentFieldEventHandler	No	Function called when the field receives focus.