onClick

label

the [Modifier] to be applied to this chip

modifier

controls the enabled state of this chip. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

enabled

optional icon at the start of the chip, preceding the [label] text

leadingIcon

trailingIcon

defines the shape of this chip's container, border (when [border] is not null), and shadow (when using [elevation])

shape

[ChipColors] that will be used to resolve the colors used for this chip in different states. See [AssistChipDefaults.assistChipColors].

colors

[ChipElevation] used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [AssistChipDefaults.assistChipElevation].

elevation

the border to draw around the container of this chip. Pass `null` for no border. See [AssistChipDefaults.assistChipBorder].

border

the [MutableInteractionSource] representing the stream of [Interaction]s for this chip. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this chip in different states

interactionSource

AssistChip

whether this checkbox is checked or unchecked

checked

called when this checkbox is clicked. If `null`, then this checkbox will not be interactable, unless something else handles its input events and updates its state.

onCheckedChange

the [Modifier] to be applied to this checkbox

controls the enabled state of this checkbox. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

[CheckboxColors] that will be used to resolve the colors used for this checkbox in different states. See [CheckboxDefaults.colors].

the [MutableInteractionSource] representing the stream of [Interaction]s for this checkbox. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this checkbox in different states

Checkbox

CheckboxCard

the [Color] to use when the CheckBox is checked

checkedColor

the [Color] to use when the CheckBox is not checke

uncheckedColor

[CheckBoxColors] that uses [checkedColor] or [uncheckedColor] depending ons the checked state of the CheckBox.

CheckBoxColors

When disabled, chip will not respond to user input. It will also appear visually disabled and disabled to accessibility services.

The [MutableInteractionSource] represents the stream of [Interaction]s for this chip. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this [*component*] in different [Interaction]s.

Border to draw around the chip. Pass `null` here for no border.

[ChipColors] that will be used to resolve the background and content color for this chip in different states. See [ChipDefaults.chipColors].

Optional icon at the start of the chip, preceding the content text.

content

Chip

Will be called when the user clicks the chip

A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "center" aligned if not.

A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size [ChipDefaults.SmallIconSize] when used with a label or [ChipDefaults.IconSize] when used as the only content in the CompactChip. In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

icon

[ChipColors] that will be used to resolve the background and content color for this chip in different states. See [ChipDefaults.chipColors]. Defaults to [ChipDefaults.primaryChipColors]

Controls the enabled state of the chip. When `false`, this chip will not be clickable

The [MutableInteractionSource] representing the stream of [Interaction]s for this Chip. You can create and pass in your own remembered [MutableInteractionSource] if you want to observe [Interaction]s and customize the appearance / behavior of this Chip in different [Interaction]s.

The spacing values to apply internally between the container and the conten

contentPadding

CompactChip

state of the date picker. See [rememberDatePickerState].

state

the [Modifier] to be applied to this date picker

a [DatePickerFormatter] that provides formatting skeletons for dates display

dateFormatter

the title to be displayed in the date picker

title

the headline to be displayed in the date picker

headline

indicates if this DatePicker should show a mode toggle action that transforms it into a date input

showModeToggle

[DatePickerColors] that will be used to resolve the colors used for this date picker in different states. See [DatePickerDefaults.colors]

DatePicker

called when the user tries to dismiss the Dialog by clicking outside or pressing the back button. This is not called when the dismiss button is clicked.

onDismissRequest

button which is meant to confirm a proposed action, thus resolving what triggered the dialog. The dialog does not set up any events for this button, nor does it control its enablement, so those need to be set up by the caller.

confirmButton

the [Modifier] to be applied to this dialog's content.

button which is meant to dismiss the dialog. The dialog does not set up any events for this button so they need to be set up by the caller.

dismissButton

defines the dialog's surface shape as well its shadow

when [DatePickerColors.containerColor] is [ColorScheme.surface], a higher the elevation will result in a darker color in light theme and lighter color in dark theme

tonalElevation

[DatePickerColors] that will be used to resolve the colors used for this date picker in different states. See [DatePickerDefaults.colors].

typically platform specific properties to further configure the dialog

properties

the content of the dialog (i.e. a [DatePicker], for example

DatePickerDialog

state of the date range picker. See [rememberDateRangePickerState].

the [Modifier] to be applied to this date range picker

the title to be displayed in the date range picker

the headline to be displayed in the date range picker

indicates if this DateRangePicker should show a mode toggle action that transforms it into a date range input

[DatePickerColors] that will be used to resolve the colors used for this date range picker in different states. See [DatePickerDefaults.colors]

DateRangePicker

Contains default values used by the [DateRangePicker].

DateRangePickerTitle

Disables text selection for its direct or indirect children.

DisableSelection

expanded

called when the user requests to dismiss the menu, such as by tapping outside the menu's bounds

[DpOffset] to be added to the position of the men

offset

DropdownMenu

text

the [Modifier] to be applied to this menu item

optional leading icon to be displayed at the beginning of the item's text

optional trailing icon to be displayed at the end of the item's text. This trailing icon slot can also accept [Text] to indicate a keyboard shortcut.

controls the enabled state of this menu item. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

[MenuItemColors] that will be used to resolve the colors used for this menu item in different states. See [MenuDefaults.itemColors].

the padding applied to the content of this menu item

the [MutableInteractionSource] representing the stream of [Interaction]s for this menu item. You can create and pass in your own `remember`ed instance to observe [Interaction]s and customize the appearance / behavior of this menu item in different states

DropdownMenuItem

[ChipColors] that will be used to resolve the colors used for this chip in different states. See [AssistChipDefaults.elevatedAssistChipColors].

[ChipElevation] used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [AssistChipDefaults.elevatedAssistChipElevation].

the border to draw around the container of this chip

ElevatedAssistChip

selected

optional icon at the start of the chip, preceding the [label] text. When [selected] is true, this icon may visually indicate that the chip is selected (for example, via a checkmark icon).

[SelectableChipColors] that will be used to resolve the colors used for this chip in different states. See [FilterChipDefaults.elevatedFilterChipColors].

[SelectableChipElevation] used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [FilterChipDefaults.filterChipElevation].

the border to draw around the container of this chip. Pass `null` for no border. See [FilterChipDefaults.filterChipBorder].

ElevatedFilterChip

[ChipColors] that will be used to resolve the colors used for this chip in

[ChipElevation] used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [Surface] and [SuggestionChipDefaults.elevatedSuggestionChipElevation].

the border to draw around the container of this chip different states. See [SuggestionChipDefaults.elevatedSuggestionChipColors].

ElevatedSuggestionChip

called when the exposed dropdown menu is clicked and the expansion state changes.

onExpandedChange

the [Modifier] to be applied to this exposed dropdown menu

the content of this exposed dropdown menu, typically a [TextField] and an [ExposedDropdownMenuBoxScope.ExposedDropdownMenu]. The [TextField] within [content] should be passed the [ExposedDropdownMenuBoxScope.menuAnchor] modifier for proper menu behavior

ExposedDropdownMenuBox

[SelectableChipColors] that will be used to resolve the colors used for this chip in different states. See [FilterChipDefaults.filterChipColors].

FilterChip

Current value of the Slider. If outside of [valueRange] provided, value will be coerced to this range.

value

onValueChange

Specifies the number of discrete values, excluding min and max values, evenly distributed across the whole value range. Must not be negative. If 0, slider will have only min and max values and no steps in between

steps

A slot for an icon which is placed on the decrease (start) button

decreaseIcon

A slot for an icon which is placed on the increase (end) button

increaseIcon

Controls the enabled state of the slider. When `false`, this slider will not be clickable

Range of values that Slider value can take. Passed [value] will be coerced to this range

valueRange

A boolean value which specifies whether a bar will be split into segments or not. Recommendation is while using this flag do not have more than 8 [steps] as it might affect user experience. By default true if number of [steps] is <=8.

segmented

[InlineSliderColors] that will be used to resolve the background and content color for this slider in different state

[InlineSlider] allows users to make a selection from a range of values.

InlineSlider

optional avatar at the start of the chip, preceding the [label] text

avatar

[ChipColors] that will be used to resolve the colors used for this chip in different states. See [InputChipDefaults.inputChipColors].

[ChipElevation] used to resolve the elevation for this chip in different states. This controls the size of the shadow below the chip. Additionally, when the container color is [ColorScheme.surface], this controls the amount of primary color applied as an overlay. See [InputChipDefaults.inputChipElevation].

the border to draw around the container of this chip. Pass `null` for no border. See [InputChipDefaults.inputChipBorder].

InputChip

A slot for providing the chip's main label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not.

A slot for providing the chip's secondary label. The contents are expected to be text which is "start" aligned if there is an icon preset and "start" or "center" aligned if not. label and secondaryLabel contents should be consistently aligned.

secondaryLabel

A slot for providing the chip's icon. The contents are expected to be a horizontally and vertically aligned icon of size [ChipDefaults.IconSize] or [ChipDefaults.LargeIconSize]. In order to correctly render when the Chip is not enabled the icon must set its alpha value to [LocalContentAlpha].

[ChipColors] that will be used to resolve the background and content color for this chip in different states.

The spacing values to apply internally between the container and the content

Defines the chip's shape. It is strongly recommended to use the default as this shape is a key characteristic of the Wear Material Theme

[ChipBorder] that will be used to resolve the chip border in different states

OutlinedChip

[ChipColors] that will be used to resolve the background and content color for this chip in different states. See [ChipDefaults.outlinedChipColors]. Defaults to [ChipDefaults.primaryChipColors]

[ChipBorder] that will be used to resolve the border for this chip in different states. See [ChipDefaults.outlinedChipBorder]

OutlinedCompactChip

Determines whether the Picker should display other available options for this field, inviting the user to scroll to change the value. When readOnly = true, only displays the currently selected option (and optionally a label). This is intended to be used for screens that display multiple Pickers, only one of which has the focus at a time.

readOnly

A slot for providing a label, displayed above the selected option when the [Picker] is read-only. The label is overlaid with the currently selected option within a Box, so it is recommended that the label is given [Alignment.TopCenter].

readOnlyLabel

The parameters to configure the scaling and transparency effects for the component. See [ScalingParams]

scalingParams

The amount of separation in [Dp] between items. Can be negative, which can be useful for Text if it has plenty of whitespace.

separation

The size relative to the Picker height that the top and bottom gradients take. These gradients blur the picker content on the top and bottom. The default is 0.33, so the top 1/3 and the bottom 1/3 of the picker are taken by gradients. Should be between 0.0 and 0.5. Use 0.0 to disable the gradient.

gradientRatio

Should be the color outside of the Picker, so there is continuity.

gradientColor

flingBehavior

A block which describes the content. Inside this block you can reference [PickerScope.selectedOption] and other properties in [PickerScope]. When read-only mode is in use on a screen, it is recommended that this content is given [Alignment.Center] in order to align with the centrally selected Picker value

option

Picker

A dialog that lets the user pick an option from a list.

PickerDialog

List of [Picker]s represented using [PickerGroupItem] in the same order of display from left to right.

pickers

Modifier to be applied to the PickerGroup

pickerGroupState

Action triggered when one of the [Picker] is selected inside the group

onSelected

Indicates whether the selected [Picker] should be centered on the screen. It is recommended to set this as true when all the pickers cannot be fit into the screen. Or provide a mechanism to navigate to pickers which are not visible on screen. If false, the whole row containing pickers would be centered.

autoCenter

Whether the incoming min constraints should be passed to content.

propagateMinConstraints

A [TouchExplorationStateProvider] to provide the current state of touch exploration service. This will be used to determine how the PickerGroup and talkback focus behaves/reacts to click and scroll events.

touchExplorationStateProvider

A composable block which describes the separator between different [Picker]s. The integer parameter to the composable depicts the index where it will be kept. For example, 0 would represent the separator between the first and second picker

separator

A group of [Picker]s to build components where multiple pickers are required to be combined together.

PickerGroup

whether this radio button is selected or not

called when this radio button is clicked. If `null`, then this radio button will not be interactable, unless something else handles its input events and updates its state.

the [Modifier] to be applied to this radio button

controls the enabled state of this radio button. When `false`, this component will not respond to user input, and it will appear visually disabled and disabled to accessibility services.

[RadioButtonColors] that will be used to resolve the color used for this radio button in different states. See [RadioButtonDefaults.colors].

RadioButton

A list of all Jetpack Compose Selection components listed on our website, you can use in your Jetpack Compose projects.

Jetpack Compose Selection components