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 TextField",
    description = "Nativeblocks textField block",
    version = 2
)
@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

enable

Specifies if the text field is enabled.

@NativeBlockData(
    description = "Whether the text field is enabled.",
    defaultValue = "true"
) enable: Boolean = true

readOnly

Specifies if the text field is read-only.

@NativeBlockData(
    description = "Whether the text field is read-only.",
    defaultValue = "false"
) readOnly: Boolean = false

Properties:

width

The width of the button.

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

height

The height of the button.

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

contentColor

The color of the text content. Default is white.

@NativeBlockProp(
    description = "The color of the text content.",
    valuePickerGroup = NativeBlockValuePickerPosition("Content color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#FFFFFFFF"
) contentColor: Color = Color.White

disabledContentColor

The color of the text content when disabled.

@NativeBlockProp(
    description = "The color of the text when disabled.",
    valuePickerGroup = NativeBlockValuePickerPosition("Content color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#FFFFFFB2"
) disabledContentColor: Color = Color(0xFFFFFFB2)

backgroundColor

The background color of the text field.

@NativeBlockProp(
    description = "The background color of the text field.",
    valuePickerGroup = NativeBlockValuePickerPosition("Background color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#FF212121"
) backgroundColor: Color = Color(0xFF212121)

backgroundColor

The background color of the text field when disabled.

@NativeBlockProp(
    description = "The background color of the text field when disabled.",
    valuePickerGroup = NativeBlockValuePickerPosition("Background color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#212121B2"
) disableBackgroundColor: Color = Color(0x212121B2)

borderColor

The border color of the text field.

@NativeBlockProp(
    description = "The border color of the text field.",
    valuePickerGroup = NativeBlockValuePickerPosition("Border color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#FF212121"
) borderColor: Color = Color(0xFF212121)

disableBorderColor

The border color of the text field when disabled.

@NativeBlockProp(
    description = "The border color of the text field when disabled.",
    valuePickerGroup = NativeBlockValuePickerPosition("Border color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#212121B2"
) disableBorderColor: Color = Color(0x212121B2)

borderFocusColor

The border color of the text field when focused.

@NativeBlockProp(
    description = "The border color of the text field when focused.",
    valuePickerGroup = NativeBlockValuePickerPosition("Border color"),
    valuePicker = NativeBlockValuePicker.COLOR_PICKER,
    defaultValue = "#FF212121"
) borderFocusColor: Color = Color(0xFF212121)

radius

The radius of the text field in DP.

@NativeBlockProp(
    description = "The radius for the top-start corner of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) radiusTopStart: Dp = 4.dp

@NativeBlockProp(
    description = "The radius for the top-end corner of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) radiusTopEnd: Dp = 4.dp

@NativeBlockProp(
    description = "The radius for the bottom-start corner of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) radiusBottomStart: Dp = 4.dp

@NativeBlockProp(
    description = "The radius for the bottom-end corner of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Radius"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) radiusBottomEnd: Dp = 4.dp

padding

The padding of the text field in DP.

@NativeBlockProp(
    description = "The padding on the start (left) side of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) paddingStart: Dp = 4.dp

@NativeBlockProp(
    description = "The padding on the top side of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) paddingTop: Dp = 4.dp

@NativeBlockProp(
    description = "The padding on the end (right) side of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) paddingEnd: Dp = 4.dp

@NativeBlockProp(
    description = "The padding on the bottom side of the text field in DP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Spacing"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "4.0"
) paddingBottom: Dp = 4.dp

fontFamily

Specifies the font family.

@NativeBlockProp(
    description = "The font family for the text.",
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    defaultValue = "default"
) fontFamily: String = "default"

textAlign

Alignment of the text within the field.

@NativeBlockProp(
    description = "The alignment of the text (e.g., 'start', 'center', 'end', 'justify').",
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("start", "start"),
        NativeBlockValuePickerOption("center", "center"),
        NativeBlockValuePickerOption("end", "end"),
        NativeBlockValuePickerOption("justify", "justify")
    ],
    defaultValue = "start"
) textAlign: TextAlign = TextAlign.Start

fontWeight

Defines the weight of the text.

@NativeBlockProp(
    description = "The font weight of the text (e.g., 'normal', 'bold').",
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("thin", "thin"),
        NativeBlockValuePickerOption("extraLight", "extraLight"),
        NativeBlockValuePickerOption("light", "light"),
        NativeBlockValuePickerOption("normal", "normal"),
        NativeBlockValuePickerOption("medium", "medium"),
        NativeBlockValuePickerOption("semiBold", "semiBold"),
        NativeBlockValuePickerOption("bold", "bold"),
        NativeBlockValuePickerOption("extraBold", "extraBold"),
        NativeBlockValuePickerOption("black", "black")
    ],
    defaultValue = "normal"
) fontWeight: FontWeight = FontWeight.Normal

maxLines

The maximum number of lines for the text field.

@NativeBlockProp(
    description = "The maximum number of lines for the text field.",
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "100"
) maxLines: Int = 100

letterSpacing

The letter spacing for the text in SP.

@NativeBlockProp(
    description = "The letter spacing for the text in SP.",
    valuePickerGroup = NativeBlockValuePickerPosition("Font"),
    valuePicker = NativeBlockValuePicker.NUMBER_INPUT,
    defaultValue = "1.25"
) letterSpacing: TextUnit = 1.25.sp

keyboardType

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

@NativeBlockProp(
    description = "The type of keyboard to display for the text field (e.g., 'text', 'number', 'email').",
    valuePickerGroup = NativeBlockValuePickerPosition("Keyboard"),
    valuePicker = NativeBlockValuePicker.DROPDOWN,
    valuePickerOptions = [
        NativeBlockValuePickerOption("text", "text"),
        NativeBlockValuePickerOption("ascii", "ascii"),
        NativeBlockValuePickerOption("number", "number"),
        NativeBlockValuePickerOption("phone", "phone"),
        NativeBlockValuePickerOption("uri", "uri"),
        NativeBlockValuePickerOption("email", "email"),
        NativeBlockValuePickerOption("password", "password"),
        NativeBlockValuePickerOption("numberPassword", "numberPassword"),
        NativeBlockValuePickerOption("decimal", "decimal")
    ],
    defaultValue = "text"
) keyboardType: KeyboardType = KeyboardType.Text

Events

onTextChange

Event triggered when the text changes.

@NativeBlockEvent(
    description = "Callback triggered when the text field value changes.",
    dataBinding = ["text"]
) onTextChange: (String) -> Unit,

Slots:

onLeadingIcon

Composable function for the leading icon.

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

onTrailingIcon

Composable function for the trailing icon.

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

NativeTextField

Features:

Example Usage:

Data:

text

placeholder

label

enable

readOnly

Properties:

width

height

contentColor

disabledContentColor

backgroundColor

backgroundColor

borderColor

disableBorderColor

borderFocusColor

radius

padding

fontSize

fontFamily

textAlign

fontWeight

maxLines

letterSpacing

keyboardType

Events

onTextChange

Slots:

onLeadingIcon

onTrailingIcon