silk-widgets/com.varabyte.kobweb.silk.components.forms/Input

Input

@Composable

fun <T> Input(type: InputType<T>, value: T, onValueChange: (T) -> Unit, modifier: Modifier = Modifier, variant: CssStyleVariant<InputKind>? = InputDefaults.Variant, placeholder: String? = null, size: InputSize = InputDefaults.Size, enabled: Boolean = InputDefaults.Enabled, valid: Boolean = InputDefaults.Valid, required: Boolean = InputDefaults.Required, readOnly: Boolean = InputDefaults.ReadOnly, spellCheck: Boolean = InputDefaults.SpellCheck, autoComplete: AutoComplete? = null, onCommit: () -> Unit = {}, placeholderColor: PlaceholderColor? = null, focusBorderColor: CSSColorValue? = null, invalidBorderColor: CSSColorValue? = null, ref: ElementRefScope<HTMLInputElement>? = null)(source)

Create and configure an HTML input element.

This creates what is called a "controlled" input, where the value of the input is controlled by the caller. A simple example looks like this, where you supply the value directly and then modify it in response to a callback:

var text by remember { mutableStateOf("") }
Input(InputType.Text, text, onValueChange = { text = it })

Parameters

type

The type of input to create. See InputType for the full list of choices.

value

The current value of the input.

onValueChange

An event triggered when input value wants to change (e.g. in response to user input)

placeholder

Placeholder text to show when the input is empty.

size

The size of the input, with standard T-shirt sizes (XS, SM, MD, LG) available. See also: InputSize.

placeholderColor

An optional override for the placeholder color.

focusBorderColor

An optional override for the border color when the input is focused.

invalidBorderColor

An optional override for the border color when the valid is false.

enabled

If set to false, this input will be disabled.

valid

If set to false, this input will be decorated with a special border color when unfocused, and the element itself will be tagged with an aria-invalid attribute.

readOnly

If set to true, the user will not be able to change the value of this input (but unlike enabled this shouldn't affect the ability to select the input).

spellCheck

If set to true, the input will underline misspelled words. Defaults to false.

autoComplete

An optional strategy to help the browser autocomplete the value automatically. See AutoComplete for a full list.

onCommit

An optional callback that gets triggered when the user presses ENTER while focused on the input. Note that this method will not be triggered if valid is set to false.