ui:design/com.pico.spatial.ui.design/NumberField

NumberField

@Composable

fun NumberField(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, increaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultIncreaseIcon(), decreaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultDecreaseIcon(), stepLength: Int = 1, valueRange: IntRange = NumberFieldDefaults.DefaultRange, colors: NumberFieldColors = NumberFieldDefaults.numberFieldColors(), size: NumberFieldSize = NumberFieldDefaults.defaultSize(), cornerSize: Dp = size.height.cornerSize(), gap: Dp = NumberFieldDefaults.DefaultGap, enabled: Boolean = true, editable: Boolean = true, textStyle: TextStyle = NumberFieldDefaults.defaultTextStyle(size.height), keyboardOptions: KeyboardOptions = NumberFieldDefaults.DefaultKeyboardOptions)

NumberField is used to create a number input field with increase and decrease buttons.

Parameters

value

The current value of the number field.

onValueChange

The callback that is triggered when the value changes.

modifier

The Modifier to be applied to the number field.

increaseIcon

The icon to be displayed for the increase button.

decreaseIcon

The icon to be displayed for the decrease button.

stepLength

The step length for increasing or decreasing the value.

valueRange

The range of valid values for the number field.

colors

The colors for the number field.

size

The size of the number field.

cornerSize

The corner size of the number field.

gap

The gap between the text and buttons

enabled

Whether the number field is enabled.

editable

Whether the number field is editable.

textStyle

The text style for the number field.

keyboardOptions

The keyboard options for the number field.

Samples

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(
    value = value,
    onValueChange = { value = it },
    size = NumberFieldDefaults.smallSize(),
) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, valueRange = -100..100) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, stepLength = 2) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, editable = false) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, enabled = false) 
   //sampleEnd
}

@Composable

fun NumberField(value: Int, onValueChange: (Int) -> Unit, modifier: Modifier = Modifier, increaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultIncreaseIcon(), decreaseIcon: @Composable () -> Unit = NumberFieldDefaults.defaultDecreaseIcon(), stepLength: Int = 1, valueRange: IntRange = NumberFieldDefaults.DefaultRange, colors: NumberFieldColors = NumberFieldDefaults.numberFieldColors(), vibrants: NumberFieldVibrants = NumberFieldDefaults.numberFieldVibrants(), size: NumberFieldSize = NumberFieldDefaults.defaultSize(), cornerSize: Dp = size.height.cornerSize(), gap: Dp = NumberFieldDefaults.DefaultGap, enabled: Boolean = true, editable: Boolean = true, textStyle: TextStyle = NumberFieldDefaults.defaultTextStyle(size.height), keyboardOptions: KeyboardOptions = NumberFieldDefaults.DefaultKeyboardOptions)

NumberField is used to create a number input field with increase and decrease buttons.

Parameters

value

The current value of the number field.

onValueChange

The callback that is triggered when the value changes.

modifier

The Modifier to be applied to the number field.

increaseIcon

The icon to be displayed for the increase button.

decreaseIcon

The icon to be displayed for the decrease button.

stepLength

The step length for increasing or decreasing the value.

valueRange

The range of valid values for the number field.

colors

The colors for the number field.

vibrants

The vibrants for the number field.

size

The size of the number field.

cornerSize

The corner size of the number field.

gap

The gap between the text and buttons

enabled

Whether the number field is enabled.

editable

Whether the number field is editable.

textStyle

The text style for the number field.

keyboardOptions

The keyboard options for the number field.

Samples

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(
    value = value,
    onValueChange = { value = it },
    size = NumberFieldDefaults.smallSize(),
) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, valueRange = -100..100) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, stepLength = 2) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, editable = false) 
   //sampleEnd
}

import androidx.compose.runtime.Composable
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import com.pico.spatial.ui.design.NumberField
import com.pico.spatial.ui.design.NumberFieldDefaults

fun main() { 
   //sampleStart 
   var value by remember { mutableIntStateOf(0) }
NumberField(value = value, onValueChange = { value = it }, enabled = false) 
   //sampleEnd
}