NativeTextField

NativeTextField allows for user input with various customization options such as font, alignment, secure text entry, and event handling.

@NativeBlock(
    keyType = "NATIVE_TEXT_FIELD",
    name = "Native Text Field",
    description = "Nativeblocks text field block",
    version = 1
)
@Composable
fun NativeTextField(
    ...
)

NativeTextField provides a customizable input field for collecting text input. It supports dynamic properties and event handling, making it suitable for server-driven UI frameworks.

---

Features:

• Handles secure and standard text input.
• Supports dynamic font, padding, alignment, and size adjustments.
• Provides event triggers for text changes, focus changes, and submission.

---

Example Usage:

NativeTextField(
    text = "Hello, World!",
    placeholder = "Enter your text here",
    enable = true,
    readOnly = false,
    onTextChange = { newText -> println("Text changed: $newText") }
)

---

Data:

text

The current text in the field.

@NativeBlockData(description = "The text content to display.")
var text: String

placeholder

Text displayed when the field is empty.

@NativeBlockData(description = "Placeholder text shown when the text field is empty.")
var placeholder: String

label

Label for the text field, displayed as a floating label.

@NativeBlockData(description = "The label text for the text field.")
var label: String

---

Properties:

fontSize

The size of the text in the field (SP).

@NativeBlockProp(description = "Font size of the text.")
var fontSize: Double = 14.0

fontFamily

Specifies the font family.

@NativeBlockProp(description = "Font family of the text.")
var fontFamily: String = "default"

textAlign

Alignment of the text within the field.

@NativeBlockProp(description = "Alignment of text content.")
var textAlign: String = "start"

fontWeight

Defines the weight of the text.

@NativeBlockProp(description = "Font weight of the text.")
var fontWeight: String = "normal"

textColor

Color of the text content.

@NativeBlockProp(description = "The color of the text in the field.")
var textColor: String = "#FFFFFF"

backgroundColor

Background color of the text field.

@NativeBlockProp(description = "Background color of the text field.")
var backgroundColor: String = "#000000"

---

paddingStart

Padding on the start side of the box.

@NativeBlockProp(
    description = "Padding on the start side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingStart: Double = 0.0

---

paddingTop

Padding on the top side of the box.

@NativeBlockProp(
    description = "Padding on the top side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingTop: Double = 0.0

---

paddingEnd

Padding on the end side of the box.

@NativeBlockProp(
    description = "Padding on the end side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingEnd: Double = 0.0

---

paddingBottom

Padding on the bottom side of the box.

@NativeBlockProp(
    description = "Padding on the bottom side of the box.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing")
)
var paddingBottom: Double = 0.0

---

width

The width of the button.

@NativeBlockProp(
    description = "The width of the button (e.g., 'match' or 'wrap').",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Size")
)
val width: String = "wrap"

height

The height of the button.

@NativeBlockProp(
    description = "The height of the button (e.g., 'match' or 'wrap').",
    valuePicker = NativeBlockValuePicker.COMBOBOX_INPUT,
    valuePickerOptions = [
        NativeBlockValuePickerOption("match", "Match parent"),
        NativeBlockValuePickerOption("wrap", "Wrap content")
    ],
    valuePickerGroup = NativeBlockValuePickerPosition("Size")
)
val height: String = "wrap"

cornerRadius

Defines the corner radius for a rounded border.

@NativeBlockProp(description = "Radius of the text field's corners.")
var cornerRadius: Double = 4.0

---

keyboardType

The type of keyboard to display (e.g., text, number).

@NativeBlockProp(description = "Keyboard type for input.")
var keyboardType: String = "text"

enable

Specifies if the text field is enabled.

@NativeBlockData(description = "Enable or disable the text field.")
var enable: Boolean = true

readOnly

Specifies if the text field is read-only.

@NativeBlockData(description = "Marks the text field as read-only.")
var readOnly: Boolean = false

---

Events

onTextChange

Event triggered when the text changes.

@NativeBlockEvent(description = "Callback triggered on text change.")
var onTextChange: (String) -> Unit

---

Slots:

onLeadingIcon

Composable function for the leading icon.

@NativeBlockSlot(description = "Slot for the leading icon in the text field.")
var onLeadingIcon: (@Composable (index: BlockIndex) -> Unit)? = null

onTrailingIcon

Composable function for the trailing icon.

@NativeBlockSlot(description = "Slot for the trailing icon in the text field.")
var onTrailingIcon: (@Composable (index: BlockIndex) -> Unit)? = null