# TextInputMapper

The TextInputMapper component allows users to create and manage key-value pairs dynamically. It provides an interface for adding, editing, and removing mappings with customizable input components for both keys and values.

## Properties

- **`value`** `Record<string, string>` — The key-value pairs in controlled mode
- **`onChange`** `(value: Record<string, string> | undefined) => void` — Callback fired when mappings change
- **`actionLabel`** `string` (default: `'Mapping'`) — Label text for the add mapping button
- **`KeyComponent`** `ComponentType` — Custom component for rendering key inputs
- **`ValueComponent`** `ComponentType` — Custom component for rendering value inputs
- **`keyProps`** `Partial<CubeTextInputMapperInputProps>` — Additional props passed to each key input
- **`valueProps`** `Partial<CubeTextInputMapperInputProps>` — Additional props passed to each value input
- **`allowsCustomValue`** `boolean` — Whether custom (free-form) values are allowed in combobox inputs
- **`size`** `'small' | 'medium' | 'large'` (default: `'medium'`) — Size of the input fields and buttons

### Base Properties

Supports [Base properties](../../BaseProperties.md)

### Field Properties

Supports all [Field properties](../../FieldProperties.md)

## Sub-elements

The TextInputMapper component is a complex compound component that doesn't expose styled sub-elements via the `styles` prop. Instead, it uses internal layout components and delegates styling to its key and value input components.

## Style Properties

The TextInputMapper component supports all standard style properties:

`display`, `font`, `preset`, `hide`, `opacity`, `whiteSpace`, `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`, `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`, `reset`, `padding`, `paddingInline`, `paddingBlock`, `shadow`, `border`, `radius`, `overflow`, `scrollbar`, `outline`, `textAlign`, `color`, `fill`, `fade`, `textTransform`, `fontWeight`, `fontStyle`, `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`

## Accessibility

The TextInputMapper component follows WAI-ARIA guidelines:

- Uses semantic form controls for key-value inputs
- Provides clear labeling for all interactive elements
- Supports keyboard navigation between fields and actions
- Announces changes when mappings are added or removed
- Associates labels with input elements using appropriate ARIA attributes

## Best Practices

- Use descriptive labels that clearly indicate the purpose of the key-value pairs
- Provide appropriate `actionLabel` text for the add button
- Consider using custom components for specialized input types
- Set appropriate validation on both key and value inputs
- Use `allowsCustomValue` when users need flexibility in value selection
- Provide clear feedback when validation fails on individual pairs

### Style Properties

These properties allow direct style application without using the `styles` prop:

- **Base:** `display`, `font`, `preset`, `hide`, `whiteSpace`, `opacity`, `transition`
- **Position:** `gridArea`, `order`, `gridColumn`, `gridRow`, `placeSelf`, `alignSelf`, `justifySelf`, `zIndex`, `margin`, `inset`, `position`
- **Dimension:** `width`, `height`, `flexBasis`, `flexGrow`, `flexShrink`, `flex`
- **Block:** `border`, `radius`, `shadow`, `outline`, `padding`, `paddingInline`, `paddingBlock`, `overflow`, `scrollbar`, `textAlign`
- **Color:** `color`, `fill`, `fade`, `image`
- **Text:** `textTransform`, `fontWeight`, `fontStyle`
- **Flow:** `flow`, `placeItems`, `placeContent`, `alignItems`, `alignContent`, `justifyItems`, `justifyContent`, `align`, `justify`, `gap`, `columnGap`, `rowGap`, `gridColumns`, `gridRows`, `gridTemplate`, `gridAreas`
