Biofarma | Bind UI

Input

A text input component UI is a widely used element in web and mobile applications for capturing short, single-line text input from users. It is typically used for things like collecting names, emails, search queries, or any other type of single-line text data.

Type	Resource
Design	Figma
Web	Web Storybook
Code	Gitlab

Usage

import id.co.biofarma.binduiandroid.components.textinput.Textinput

fun TextInput(
    id: String = "",
    variant: String = "outline",
    type: String = "text",
    label: String= "textinput",
    value: TextFieldValue = TextFieldValue(""),
    placeholder: String = "",
    helperText: String = "",
    errorText: String = "",
    maxText: Int = 0,
    showCount: Boolean = false,
    disabled: Boolean = false,
    isError: Boolean = false,
    isRequired: Boolean = false,
    prefixAddsOn: String = "",
    suffixAddsOn: String = "",
    startIcon: @Composable (() -> Unit)? = null,
    endIcon: @Composable (() -> Unit)? = null,
    labelIcon: @Composable (() -> Unit)? = null,
    size: String = ComponentSize.MD.value,
    radius: String = ComponentRadius.MD.value,
    mode: String = ThemeMode.LIGHT.value,
    style: Modifier = Modifier,
    onChange: (TextFieldValue) -> Unit = {},
)

Examples

Variant

Use variant to change variant of input component: outline, background, underline

AddOns (Optional)

input addons can be used to extend a simple input field by adding extra components like buttons, icons, or tooltips inside or next to the input field.

Mode (Optional)

Use mode for change color mode on input component: light and dark

Props

Props	Required	Default	Type	Description
`id`	true	-	`string`	The unique identifier for the input component, useful for accessibility and targeting specific elements.
`variant`	false	`outline`	`outline`, `background`, `underline`	Determines the visual style of the input field, such as outlined, with background color, or underlined.
`type`	false	`text`	`text`, `password`, `number`	Specifies the type of input field, such as text (default), password (for sensitive data), or number (for numeric input).
`label`	true	`textinput`	`string`	The label text that describes the input field, displayed above or beside the input box.
`value`	true	-	`TextFieldValue`	The current value of the input field, typically bound to a state or model for data handling.
`placeholder`	true	`enter text`	`string`	Placeholder text displayed in the input field when it is empty, guiding the user on what to enter.
`maxText`	true	`50`	`integer`	The maximum length of text allowed in the input field. It helps control the amount of user input.
`helperText`	true	`helper text`	`string`	Provides additional information or instruction below the input field, such as usage tips or requirements.
`errorText`	true	`error text`	`string`	Text displayed below the input when there is an error, indicating invalid input or a validation issue.
`showCount`	true	`false`	`boolean`	Indicates whether to display a character count below the input, showing how many characters have been entered.
`isError`	false	`false`	`boolean`	A flag indicating whether the input field should display an error state, such as a red border.
`isRequired`	false	`false`	`boolean`	Indicates whether the input field is required, often reflected by an asterisk next to the label.
`disabled`	false	`false`	`boolean`	Disables the input field, preventing the user from interacting with it or entering data.
`size`	false	`sm`	`sm`, `md`, `lg`	Defines the size of the input field, which could be small (`sm`), medium (`md`), or large (`lg`).
`prefixAddsOn`	false	-	`string`	Allows the addition of a prefix (like a currency symbol or an icon) at the beginning of the input field.
`suffixAddsOn`	false	-	`string`	Allows the addition of a suffix (like a unit or a button) at the end of the input field.
`showStartIcon`	false	`false`	`boolean`	Indicates whether an icon should be displayed at the start (left side) of the input field.
`showEndIcon`	false	`false`	`boolean`	Indicates whether an icon should be displayed at the end (right side) of the input field.
`showLabelIcon`	false	`false`	`boolean`	Indicates whether an icon should be displayed next to the label, often used for a visual cue or a specific action (e.g., a search icon next to the label).

Date Picker Pin Input