Design/net.ikea.skapa.ui.components/HelperText

HelperText

@Composable
fun HelperText(label: String, state: HelperTextState, modifier: Modifier = Modifier)

Helper Text is a validation component designed to help out and provide guidance to form elements. This component consists only of an icon indicator and a label and it should be used together with other components.

The Helper Text component has three different states.

Parameters

label

The text to be displayed.

state

defines the validation state of the component

modifier

Modifier to be applied in the Row around the component

See also

Samples

import androidx.compose.foundation.isSystemInDarkTheme
import androidx.compose.foundation.layout.*
import androidx.compose.foundation.selection.selectableGroup
import androidx.compose.runtime.*
import androidx.compose.runtime.saveable.rememberSaveable
import androidx.compose.ui.Modifier
import androidx.compose.ui.semantics.clearAndSetSemantics
import androidx.compose.ui.semantics.contentDescription
import androidx.compose.ui.semantics.semantics
import androidx.compose.ui.tooling.preview.Preview
import net.ikea.skapa.foundation.*
import net.ikea.skapa.ui.components.Button
import net.ikea.skapa.ui.components.ButtonSize
import net.ikea.skapa.ui.components.ButtonVariant
import net.ikea.skapa.ui.components.HelperText
import net.ikea.skapa.ui.components.HelperTextState
import net.ikea.skapa.ui.components.RadioButton
import net.ikea.skapa.ui.components.RadioButtonVariant

fun main() { 
   //sampleStart 
   val options = (0..2).map { index -> Pair(index, "Item $index") }
var selectedId by rememberSaveable { mutableStateOf<Int?>(null) }
var helperState by rememberSaveable { mutableStateOf(HelperTextState.Regular) }

// Updates message and helper state depending on the field validation
val helperText = when (helperState) {
    HelperTextState.Regular -> "Select an item"
    HelperTextState.Success -> "All good"
    HelperTextState.Error -> "You need to select an option"
    HelperTextState.Warning -> "Ok, but can be improved"
}

// Update the selected option of the radio group
fun selectOption(id: Int) {
    selectedId = id
    if (helperState == HelperTextState.Error) helperState = HelperTextState.Success
}

fun submitForm() {
    // Validate fields
    if (selectedId == null) {
        helperState = HelperTextState.Error
    }
    // DO SOMETHING HERE
}
SkapaTheme2(isSystemInDarkTheme()) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(SkapaSpacing.space100),
        verticalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)
    ) {
        // Group of radio buttons to be validated
        Column(
            Modifier
                .selectableGroup()
                .semantics {
                    if (helperState == HelperTextState.Error) {
                        error(helperText)
                    } else {
                        contentDescription = helperText
                    }
                }
        ) {
            options.forEach { (id, label) ->
                RadioButton(label = label, selected = (id == selectedId), variant = RadioButtonVariant.Subtle, onClick = { selectOption(id) })
            }
        }
        // Helper text to support radio button validation
        HelperText(label = helperText, state = helperState, modifier = Modifier.clearAndSetSemantics { })

        // Button to save the information
        Row(horizontalArrangement = Arrangement.spacedBy(SkapaSpacing.space50)) {
            Button(label = "Submit", size = ButtonSize.Small, onClick = ::submitForm)
            Button(label = "Clear", variant = ButtonVariant.Secondary, size = ButtonSize.Small) {
                selectedId = null
                helperState = HelperTextState.Regular
            }
        }
    }
} 
   //sampleEnd
}