Get the kit

Buttons & Inputs

The interactive primitives — buttons, text fields, choosers. Every one is themed by your brand color and uses your icon pack. Import from dev.shipkaro.kit.core.designsystem.components.

📱Buttons & inputs — lightlight/docs/components/buttons-inputs-light.png
📱Buttons & inputs — darkdark/docs/components/buttons-inputs-dark.png

KitButton

The primary action button — three styles, a built-in loading spinner, optional leading icon.

KitButton(
    text = "Create account",
    onClick = { viewModel.signUp() },
    style = KitButtonStyle.PRIMARY,   // PRIMARY · SECONDARY · TEXT
    loading = state.isSubmitting,     // shows a spinner, disables taps
    icon = KitTheme.icons.check,      // optional, nullable
    fillWidth = true,
)

Features

  • Three styles — PRIMARY (filled), SECONDARY (outlined), TEXT (flat)
  • loading swaps the label for a spinner and blocks taps
  • enabled greys out and disables
  • Optional leading ImageVector from your icon pack
  • fillWidth toggles full-width vs hug-content

KitTextField

The standard text input — label, placeholder, leading icon, helper text, and an error state.

KitTextField(
    value = email,
    onValueChange = { email = it },
    label = "Email",
    placeholder = "you@example.com",
    leadingIcon = KitTheme.icons.mail,
    helperText = "We'll never share this.",
    isError = emailError != null,
    keyboardOptions = KeyboardOptions(keyboardType = KeyboardType.Email),
)

Features

  • Label, placeholder, leading icon, helper text
  • isError flips the helper text + outline to your error color
  • singleLine, keyboardOptions, visualTransformation all exposed
  • trailingContent slot for custom trailing UI

KitPasswordField

A text field with built-in show/hide toggle and password keyboard.

KitPasswordField(
    value = password,
    onValueChange = { password = it },
    label = "Password",
    isError = passwordError != null,
)

Features — accessible show/hide eye, password keyboard + IME action, error state.

KitSearchField

A rounded search box with a magnifier and a clear (×) button.

KitSearchField(
    value = query,
    onValueChange = { query = it },
    placeholder = "Search notes",
    onSearch = { viewModel.search(it) },   // fired on keyboard "search"
)

KitOtpField

A segmented one-time-code entry — N cells over a single hidden field.

KitOtpField(
    value = code,
    onValueChange = { code = it },
    length = 6,                            // number of cells
    keyboardType = KeyboardType.NumberPassword,
)

KitChip & KitFilterChip

KitChip is a tappable chip; KitFilterChip is a selectable one.

KitChip(text = "Breakfast", onClick = { add("Breakfast") }, leadingIcon = KitTheme.icons.add)

KitFilterChip(
    text = "Done today",
    selected = filterDone,
    onSelectedChange = { filterDone = it },
)

KitSlider · KitStepper · KitSegmentedButton

Numeric + choice inputs.

// Continuous value with a live readout
KitSlider(label = "Volume", value = volume, onValueChange = { volume = it })

// Discrete +/- counter
KitStepper(label = "Servings", value = servings, onValueChange = { servings = it }, valueRange = 1..12)

// Single choice across N segments
KitSegmentedButton(
    options = listOf("Day", "Week", "Month"),
    selectedIndex = range,
    onSelectedChange = { range = it },
)

Features — KitSlider has a valueFormatter (defaults to a percentage), KitStepper clamps to valueRange, KitSegmentedButton renders any number of segments.

💡 See every one of these live, in your colors, on the in-app Components Catalog screen (Home → Browse kit components). Next: Containers & Lists.