SushiTextField¶

A customizable text input field component for the Sushi design system.

SushiTextField provides a standard text field with support for:

Labels and placeholder text
Error states and support text
Prefix and suffix text/icons
Custom styling via colors and shapes
Keyboard options and actions
Accessibility features

This component wraps the Material3 OutlinedTextField to maintain consistency with the design system while leveraging the functionality of the standard component.

Example¶

The SushiTextField component is used to create text input fields with various configurations.

var text by remember { mutableStateOf("") }

SushiTextField(
    props = SushiTextFieldProps(
        text = text,
        label = SushiTextProps(text = "Phone Number"),
        prefixText = SushiTextProps(text = "+91"),
        keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Phone),
        supportText = SushiTextProps(text = "Enter your mobile number")
    ),
    onValueChange = { text = it },
    modifier = Modifier.fillMaxWidth()
)

Component API¶

SushiTextField¶

Parameter	Description
`id`	Optional identifier for the text field
`text`	Current text value displayed in the field
`textStyle`	Typography style for the input text
`placeholder`	Text displayed when the field is empty
`enabled`	Whether the text field is interactive (true) or disabled (false)
`readOnly`	Whether the text field allows user input (false) or is read-only (true)
`isError`	Whether to display the text field in an error state
`label`	Optional label text displayed above the text field
`keyboardOptions`	Options controlling the behavior of the software keyboard
`keyboardActions`	Actions to perform based on keyboard input
`singleLine`	Whether the text field should be limited to a single line
`showResetButton`	Show a reset button to clear the text field's input
`maxLines`	Maximum number of lines to display when not in single line mode
`minLines`	Minimum number of lines to display
`shape`	The shape of the text field container
`visualTransformation`	Optional transformation for displaying the text (e.g., password masking)
`supportText`	Optional supporting text displayed below the text field
`prefixIcon`	Optional icon displayed at the start of the text field
`leadingIcon`	Optional icon displayed at the start of the text field (always visible)
`suffixIcon`	Optional icon displayed at the end of the text field
`trailingIcon`	Optional icon displayed at the end of the text field (always visible)
`prefixText`	Optional text displayed at the start of the text field
`suffixText`	Optional text displayed at the end of the text field
`colors`	Color scheme for the text field's various states