# Text Area

Text areas are multiline text inputs, ideal for cases where users have a sizable amount of text to enter. Text areas can be customized in the same ways that text fields can.

## Example

```python
from deephaven import ui

ta = ui.text_area(
    label="Description", on_change=lambda value: print(f"Text changed to {value}")
)
```

## UI Recommendations

Recommendations for creating text areas:

1. Text area should include a label, or else, the text area is ambiguous and not accessible.
2. Text area labels and placeholder text should follow sentence casing.
3. A text area should not use `is_quiet` styling if it has a fixed height, given that the field underline may be too far from the text to be considered part of the component.
4. Use help text to provide instructions on input format, content, and requirements; the help text should not restate the same information as the label, or prompt a user to interact with the text area.
5. Dynamically switch between help text and error messages based on input, ensuring both convey essential input requirements.

Consider using [`text_field`](text_field.md) for cases where concise, single-line input is required.

## Value

A text area’s value is empty by default, but an initial, uncontrolled, value can be set using the `default_value` prop, or, a controlled value can be set via the `value` prop.

```python
from deephaven import ui


@ui.component
def text_area_value_prop():
    return [
        ui.text_area(label="Sample (Uncontrolled)", default_value="Value 1"),
        ui.text_area(label="Sample (controlled)", value="Value 2"),
    ]


text_area_value_example = text_area_value_prop()
```

## Labeling

To provide a visual label for the text area, use the `label` prop. To indicate that the text area is mandatory, use the `is_required` prop.

```python
from deephaven import ui


@ui.component
def text_area_is_required_prop():
    return [
        ui.text_area(label="Address"),
        ui.text_area(label="Address", is_required=True),
    ]


text_area_is_required_example = text_area_is_required_prop()
```

By setting `is_required` to True, the `necessity_indicator` is set to “icon” by default, but this can be changed. Also, the `necessity_indicator` can be used indepdendently to indicate that the text area is optional.

When the `necessity_indicator` prop is set to “label”, a localized string will be generated for “(required)” or “(optional)” automatically.

```python
from deephaven import ui


@ui.component
def text_area_necessity_indicator_prop():
    return [
        ui.text_area(label="Address", is_required=True, necessity_indicator="label"),
        ui.text_area(label="Address", necessity_indicator="label"),
    ]


text_area_necessity_indicator_example = text_area_necessity_indicator_prop()
```

## Events

The `on_change` property is triggered whenever the value in the text area is edited.

```python
from deephaven import ui


@ui.component
def text_area_on_change_prop():
    value, set_value = ui.use_state("")
    return ui.text_area(label="Your text", value=value, on_change=set_value)


text_area_on_change_example = text_area_on_change_prop()
```

## HTML Forms

Text areas can support a `name` prop for integration with HTML forms, allowing for easy identification of a value on form submission.

```python
from deephaven import ui


text_area_name_example = ui.form(ui.flex(ui.text_area(label="Comment", name="comment")))
```

## Quiet State

The `is_quiet` prop makes text areas “quiet”. This can be useful when the text area and its corresponding styling should not distract users from surrounding content.

```python
from deephaven import ui


text_area_is_quiet_example = ui.text_area(label="Sample", is_quiet=True)
```

## Disabled State

The `is_disabled` prop disables text areas to prevent user interaction. This is useful when the text area should be visible but not available for input.

```python
from deephaven import ui


text_area_is_disabled_example = ui.text_area(label="Sample", is_disabled=True)
```

## Read only

The `is_read_only` prop makes text areas read-only to prevent user interaction. This is different than setting the `is_disabled` prop since the text area remains focusable, and the contents of the text area remain visible.

```python
from deephaven import ui


text_area_is_read_only_example = ui.text_area(label="Sample", is_read_only=True)
```

## Label position

By default, the position of a text area’s label is above the text area, but it can be changed to the side using the `label_position` prop.

While labels can be placed either on top or on the side of the text area, top labels are the default recommendation. Top labels work better with longer copy, localization, and responsive layouts. Side labels are more useful when vertical space is limited.

```python
from deephaven import ui


@ui.component
def text_area_label_position_props():
    return [
        ui.text_area(label="Test Label"),
        ui.text_area(label="Test Label", label_position="side", label_align="start"),
    ]


text_area_label_position_example = text_area_label_position_props()
```

## Help text

A text area can have both a `description` and an `error_message`. The description remains visible at all times, except when the `validation_state` is set to “invalid” and an error message is present. Use the error message to offer specific guidance on how to correct the input.

```python
from deephaven import ui


@ui.component
def text_area_help_text_props():
    return [
        ui.text_area(
            label="Comment",
            default_value="Awesome!",
            validation_state="valid",
            description="Enter a comment.",
        ),
        ui.text_area(
            label="Comment",
            validation_state="invalid",
            error_message="Empty input is not allowed.",
        ),
    ]


text_area_help_text_example = text_area_help_text_props()
```

## Contextual Help

Using the `contextual_help` prop, a `ui.contextual_help` can be placed next to the label to provide additional information about the text area.

```python
from deephaven import ui


text_area_contextual_help_example = ui.text_area(
    label="Comment", contextual_help=ui.contextual_help(ui.heading("Sample tips"))
)
```

## Custom width

The `width` prop adjusts the width of a text area, and the `max_width` prop enforces a maximum width.

```python
from deephaven import ui


@ui.component
def text_area_width_props():
    return [
        ui.text_area(label="Sample Label", width="size-3600"),
        ui.text_area(label="Sample Label", width="size-3600", max_width="100%"),
    ]


text_area_width_example = text_area_width_props()
```

## API Reference

TextAreas are multiline text inputs, useful for cases where users have a sizable amount of text to enter. They allow for all customizations that are available to text fields.

**Returns:** `Element` The element representing the text area

<ParamTable param={{"module_name": "deephaven.ui.", "name": "text_area", "parameters": [{"name": "icon", "type": "Element | Literal['account', 'activate_breakpoints', 'add', 'archive', 'arrow_both', 'arrow_circle_down', 'arrow_circle_left', 'arrow_circle_right', 'arrow_circle_up', 'arrow_down', 'arrow_left', 'arrow_right', 'arrow_small_down', 'arrow_small_left', 'arrow_small_right', 'arrow_small_up', 'arrow_swap', 'arrow_up', 'azure_devops', 'azure', 'beaker_stop', 'beaker', 'bell_dot', 'bell_slash_dot', 'bell_slash', 'bell', 'blank', 'bold', 'book', 'bookmark', 'bracket_dot', 'bracket_error', 'briefcase', 'broadcast', 'browser', 'bug', 'calendar', 'call_incoming', 'call_outgoing', 'case_sensitive', 'check_all', 'check', 'checklist', 'chevron_down', 'chevron_left', 'chevron_right', 'chevron_up', 'chip', 'chrome_close', 'chrome_maximize', 'chrome_minimize', 'chrome_restore', 'circle_filled', 'circle_large_filled', 'circle_large', 'circle_slash', 'circle_small_filled', 'circle_small', 'circle', 'circuit_board', 'clear_all', 'clippy', 'close_all', 'close', 'cloud_download', 'cloud_upload', 'cloud', 'code_oss', 'code', 'coffee', 'collapse_all', 'color_mode', 'combine', 'comment_discussion', 'comment_draft', 'comment_unresolved', 'comment', 'compass_active', 'compass_dot', 'compass', 'copilot', 'copy', 'coverage', 'credit_card', 'dash', 'dashboard', 'database', 'debug_all', 'debug_alt_small', 'debug_alt', 'debug_breakpoint_conditional_unverified', 'debug_breakpoint_conditional', 'debug_breakpoint_data_unverified', 'debug_breakpoint_data', 'debug_breakpoint_function_unverified', 'debug_breakpoint_function', 'debug_breakpoint_log_unverified', 'debug_breakpoint_log', 'debug_breakpoint_unsupported', 'debug_console', 'debug_continue_small', 'debug_continue', 'debug_coverage', 'debug_disconnect', 'debug_line_by_line', 'debug_pause', 'debug_rerun', 'debug_restart_frame', 'debug_restart', 'debug_reverse_continue', 'debug_stackframe_active', 'debug_stackframe', 'debug_start', 'debug_step_back', 'debug_step_into', 'debug_step_out', 'debug_step_over', 'debug_stop', 'debug', 'desktop_download', 'device_camera_video', 'device_camera', 'device_mobile', 'diff_added', 'diff_ignored', 'diff_modified', 'diff_multiple', 'diff_removed', 'diff_renamed', 'diff_single', 'diff', 'discard', 'edit', 'editor_layout', 'ellipsis', 'empty_window', 'error_small', 'error', 'exclude', 'expand_all', 'export', 'extensions', 'eye_closed', 'eye', 'feedback', 'file_binary', 'file_code', 'file_media', 'file_pdf', 'file_submodule', 'file_symlink_directory', 'file_symlink_file', 'file_zip', 'file', 'files', 'filter_filled', 'filter', 'flame', 'fold_down', 'fold_up', 'fold', 'folder_active', 'folder_library', 'folder_opened', 'folder', 'game', 'gear', 'gift', 'gist_secret', 'gist', 'git_commit', 'git_compare', 'git_fetch', 'git_merge', 'git_pull_request_closed', 'git_pull_request_create', 'git_pull_request_draft', 'git_pull_request_go_to_changes', 'git_pull_request_new_changes', 'git_pull_request', 'git_stash_apply', 'git_stash_pop', 'git_stash', 'github_action', 'github_alt', 'github_inverted', 'github_project', 'github', 'globe', 'go_to_file', 'go_to_search', 'grabber', 'graph_left', 'graph_line', 'graph_scatter', 'graph', 'gripper', 'group_by_ref_type', 'heart_filled', 'heart', 'history', 'home', 'horizontal_rule', 'hubot', 'inbox', 'indent', 'info', 'insert', 'inspect', 'issue_draft', 'issue_reopened', 'issues', 'italic', 'jersey', 'json', 'kebab_vertical', 'key', 'law', 'layers_active', 'layers_dot', 'layers', 'layout_activitybar_left', 'layout_activitybar_right', 'layout_centered', 'layout_menubar', 'layout_panel_center', 'layout_panel_justify', 'layout_panel_left', 'layout_panel_off', 'layout_panel_right', 'layout_panel', 'layout_sidebar_left_off', 'layout_sidebar_left', 'layout_sidebar_right_off', 'layout_sidebar_right', 'layout_statusbar', 'layout', 'library', 'lightbulb_autofix', 'lightbulb_sparkle', 'lightbulb', 'link_external', 'link', 'list_filter', 'list_flat', 'list_ordered', 'list_selection', 'list_tree', 'list_unordered', 'live_share', 'loading', 'location', 'lock_small', 'lock', 'magnet', 'mail_read', 'mail', 'map_filled', 'map_vertical_filled', 'map_vertical', 'map', 'markdown', 'megaphone', 'mention', 'menu', 'merge', 'mic_filled', 'mic', 'milestone', 'mirror', 'mortar_board', 'move', 'multiple_windows', 'music', 'mute', 'new_file', 'new_folder', 'newline', 'no_newline', 'note', 'notebook_template', 'notebook', 'octoface', 'open_preview', 'organization', 'output', 'package', 'paintcan', 'pass_filled', 'pass', 'percentage', 'person_add', 'person', 'piano', 'pie_chart', 'pin', 'pinned_dirty', 'pinned', 'play_circle', 'play', 'plug', 'preserve_case', 'preview', 'primitive_square', 'project', 'pulse', 'question', 'quote', 'radio_tower', 'reactions', 'record_keys', 'record_small', 'record', 'redo', 'references', 'refresh', 'regex', 'remote_explorer', 'remote', 'remove', 'replace_all', 'replace', 'reply', 'repo_clone', 'repo_force_push', 'repo_forked', 'repo_pull', 'repo_push', 'repo', 'report', 'request_changes', 'robot', 'rocket', 'root_folder_opened', 'root_folder', 'rss', 'ruby', 'run_above', 'run_all_coverage', 'run_all', 'run_below', 'run_coverage', 'run_errors', 'save_all', 'save_as', 'save', 'screen_full', 'screen_normal', 'search_fuzzy', 'search_stop', 'search', 'send', 'server_environment', 'server_process', 'server', 'settings_gear', 'settings', 'share', 'shield', 'sign_in', 'sign_out', 'smiley', 'snake', 'sort_precedence', 'source_control', 'sparkle_filled', 'sparkle', 'split_horizontal', 'split_vertical', 'squirrel', 'star_empty', 'star_full', 'star_half', 'stop_circle', 'surround_with', 'symbol_array', 'symbol_boolean', 'symbol_class', 'symbol_color', 'symbol_constant', 'symbol_enum_member', 'symbol_enum', 'symbol_event', 'symbol_field', 'symbol_file', 'symbol_interface', 'symbol_key', 'symbol_keyword', 'symbol_method', 'symbol_misc', 'symbol_namespace', 'symbol_numeric', 'symbol_operator', 'symbol_parameter', 'symbol_property', 'symbol_ruler', 'symbol_snippet', 'symbol_string', 'symbol_structure', 'symbol_variable', 'sync_ignored', 'sync', 'table', 'tag', 'target', 'tasklist', 'telescope', 'terminal_bash', 'terminal_cmd', 'terminal_debian', 'terminal_linux', 'terminal_powershell', 'terminal_tmux', 'terminal_ubuntu', 'terminal', 'text_size', 'three_bars', 'thumbsdown_filled', 'thumbsdown', 'thumbsup_filled', 'thumbsup', 'tools', 'trash', 'triangle_down', 'triangle_left', 'triangle_right', 'triangle_up', 'twitter', 'type_hierarchy_sub', 'type_hierarchy_super', 'type_hierarchy', 'unfold', 'ungroup_by_ref_type', 'unlock', 'unmute', 'unverified', 'variable_group', 'verified_filled', 'verified', 'versions', 'vm_active', 'vm_connect', 'vm_outline', 'vm_running', 'vm', 'vr', 'vscode_insiders', 'vscode', 'wand', 'warning', 'watch', 'whitespace', 'whole_word', 'window', 'word_wrap', 'workspace_trusted', 'workspace_unknown', 'workspace_untrusted', 'zoom_in', 'zoom_out', 'dh_add_small', 'dh_arrow_to_bottom', 'dh_arrow_to_top', 'dh_check_square', 'dh_chevron_down_square', 'dh_circle_large_outline_notch', 'dh_clock', 'dh_exclamation', 'dh_eye_slash', 'dh_eye', 'dh_file_certificate', 'dh_file_csv', 'dh_file_download', 'dh_file_print', 'dh_file_search', 'dh_file_spreadsheet', 'dh_filter_filled', 'dh_filter_slash', 'dh_freeze', 'dh_gear_filled', 'dh_gears_filled', 'dh_graph_line_down', 'dh_graph_line_up', 'dh_i_cursor', 'dh_input', 'dh_new_circle_large_filled', 'dh_new_square_filled', 'dh_organization_add', 'dh_pandas', 'dh_panels', 'dh_python', 'dh_refresh', 'dh_remove_square_filled', 'dh_run_selection', 'dh_shapes', 'dh_share_filled', 'dh_share', 'dh_sort_alpha_down', 'dh_sort_alpha_up', 'dh_sort_amount_down', 'dh_sort_down', 'dh_sort_slash', 'dh_sort_up', 'dh_sort', 'dh_split_both', 'dh_square_filled', 'dh_sticky_note_filled', 'dh_strikethrough', 'dh_table', 'dh_trash_undo', 'dh_triangle_down_square', 'dh_truck', 'dh_underline', 'dh_unlink', 'dh_user_incognito', 'dh_user', 'dh_warning_circle_filled', 'dh_warning_filled'] | None", "description": "An icon to display at the start of the input", "default": "None"}, {"name": "is_quiet", "type": "bool | None", "description": "Whether the input should be displayed with a quiet style", "default": "None"}, {"name": "is_disabled", "type": "bool | None", "description": "Whether the input should be disabled", "default": "None"}, {"name": "is_read_only", "type": "bool | None", "description": "Whether the input scan be selected but not changed by the user", "default": "None"}, {"name": "is_required", "type": "bool | None", "description": "Whether the input is required before form submission", "default": "None"}, {"name": "description", "type": "Any | None", "description": "A description for the area. Provides a hint such as specific requirements for what to choose.", "default": "None"}, {"name": "error_message", "type": "Any | None", "description": "An error message to display when the area is invalid", "default": "None"}, {"name": "auto_focus", "type": "bool | None", "description": "Whether the input should be focused on page load", "default": "None"}, {"name": "value", "type": "str | None", "description": "The current value of the input", "default": "None"}, {"name": "default_value", "type": "str | None", "description": "The default value of the input", "default": "None"}, {"name": "label", "type": "Any | None", "description": "The label for the input", "default": "None"}, {"name": "auto_complete", "type": "str | None", "description": "Describes the type of autocomplete functionality the input should provide", "default": "None"}, {"name": "max_length", "type": "int | None", "description": "The maximum number of characters the input can accept", "default": "None"}, {"name": "min_length", "type": "int | None", "description": "The minimum number of characters the input can accept", "default": "None"}, {"name": "input_mode", "type": "Literal['none', 'text', 'decimal', 'numeric', 'tel', 'search', 'email', 'url'] | None", "description": "Hints at the tpye of data that might be entered by the user while editing the element or its contents", "default": "None"}, {"name": "name", "type": "str | None", "description": "The name of the input, used when submitting an HTML form", "default": "None"}, {"name": "validation_state", "type": "Literal['valid', 'invalid'] | None", "description": "Whether the input should display its \"valid\" or \"invalid\" state", "default": "None"}, {"name": "label_position", "type": "Literal['top', 'side']", "description": "The position of the label relative to the input", "default": "'top'"}, {"name": "label_align", "type": "Literal['start', 'end'] | None", "description": "The alignment of the label relative to the input", "default": "None"}, {"name": "necessity_indicator", "type": "Literal['icon', 'label'] | None", "description": "Whether the required state should be shown as an icon or text", "default": "None"}, {"name": "contextual_help", "type": "Any | None", "description": "A ContentualHelp element to place next to the label", "default": "None"}, {"name": "on_focus", "type": "Callable[[FocusEvent], None] | None", "description": "Function called when the button receives focus.", "default": "None"}, {"name": "on_blur", "type": "Callable[[FocusEvent], None] | None", "description": "Function called when the button loses focus.", "default": "None"}, {"name": "on_focus_change", "type": "Callable[[bool], None] | None", "description": "Function called when the focus state changes.", "default": "None"}, {"name": "on_key_down", "type": "Callable[[KeyboardEvent], None] | None", "description": "Function called when a key is pressed.", "default": "None"}, {"name": "on_key_up", "type": "Callable[[KeyboardEvent], None] | None", "description": "Function called when a key is released.", "default": "None"}, {"name": "on_change", "type": "Callable[[str], None] | None", "description": "Function called when the input value changes", "default": "None"}, {"name": "flex", "type": "str | float | bool | None", "description": "When used in a flex layout, specifies how the element will grow or shrink to fit the space available.", "default": "None"}, {"name": "flex_grow", "type": "float | None", "description": "When used in a flex layout, specifies how the element will grow to fit the space available.", "default": "None"}, {"name": "flex_shrink", "type": "float | None", "description": "When used in a flex layout, specifies how the element will shrink to fit the space available.", "default": "None"}, {"name": "flex_basis", "type": "str | float | None", "description": "When used in a flex layout, specifies the initial main size of the element.", "default": "None"}, {"name": "align_self", "type": "Literal['auto', 'normal', 'start', 'end', 'center', 'flex-start', 'flex-end', 'self-start', 'self-end', 'stretch'] | None", "description": "Overrides the alignItems property of a flex or grid container.", "default": "None"}, {"name": "justify_self", "type": "Literal['auto', 'normal', 'start', 'end', 'flex-start', 'flex-end', 'self-start', 'self-end', 'center', 'left', 'right', 'stretch'] | None", "description": "Species how the element is justified inside a flex or grid container.", "default": "None"}, {"name": "order", "type": "int | None", "description": "The layout order for the element within a flex or grid container.", "default": "None"}, {"name": "grid_area", "type": "str | None", "description": "When used in a grid layout specifies, specifies the named grid area that the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row", "type": "str | None", "description": "When used in a grid layout, specifies the row the element should be placed in within the grid.", "default": "None"}, {"name": "grid_column", "type": "str | None", "description": "When used in a grid layout, specifies the column the element should be placed in within the grid.", "default": "None"}, {"name": "grid_row_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting row to span within the grid.", "default": "None"}, {"name": "grid_row_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending row to span within the grid.", "default": "None"}, {"name": "grid_column_start", "type": "str | None", "description": "When used in a grid layout, specifies the starting column to span within the grid.", "default": "None"}, {"name": "grid_column_end", "type": "str | None", "description": "When used in a grid layout, specifies the ending column to span within the grid.", "default": "None"}, {"name": "margin", "type": "str | float | None", "description": "The margin for all four sides of the element.", "default": "None"}, {"name": "margin_top", "type": "str | float | None", "description": "The margin for the top side of the element.", "default": "None"}, {"name": "margin_bottom", "type": "str | float | None", "description": "The margin for the bottom side of the element.", "default": "None"}, {"name": "margin_start", "type": "str | float | None", "description": "The margin for the logical start side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_end", "type": "str | float | None", "description": "The margin for the logical end side of the element, depending on layout direction.", "default": "None"}, {"name": "margin_x", "type": "str | float | None", "description": "The margin for the left and right sides of the element.", "default": "None"}, {"name": "margin_y", "type": "str | float | None", "description": "The margin for the top and bottom sides of the element.", "default": "None"}, {"name": "width", "type": "str | float | None", "description": "The width of the element.", "default": "None"}, {"name": "min_width", "type": "str | float | None", "description": "The minimum width of the element.", "default": "None"}, {"name": "max_width", "type": "str | float | None", "description": "The maximum width of the element.", "default": "None"}, {"name": "height", "type": "str | float | None", "description": "The height of the element.", "default": "None"}, {"name": "min_height", "type": "str | float | None", "description": "The minimum height of the element.", "default": "None"}, {"name": "max_height", "type": "str | float | None", "description": "The maximum height of the element.", "default": "None"}, {"name": "position", "type": "Literal['static', 'relative', 'absolute', 'fixed', 'sticky'] | None", "description": "The position of the element.", "default": "None"}, {"name": "top", "type": "str | float | None", "description": "The distance from the top of the containing element.", "default": "None"}, {"name": "bottom", "type": "str | float | None", "description": "The distance from the bottom of the containing element.", "default": "None"}, {"name": "left", "type": "str | float | None", "description": "The distance from the left of the containing element.", "default": "None"}, {"name": "right", "type": "str | float | None", "description": "The distance from the right of the containing element.", "default": "None"}, {"name": "start", "type": "str | float | None", "description": "The distance from the start of the containing element, depending on layout direction.", "default": "None"}, {"name": "end", "type": "str | float | None", "description": "The distance from the end of the containing element, depending on layout direction.", "default": "None"}, {"name": "z_index", "type": "int | None", "description": "The stack order of the element.", "default": "None"}, {"name": "is_hidden", "type": "bool | None", "description": "Whether the element is hidden.", "default": "None"}, {"name": "id", "type": "str | None", "description": "The unique identifier of the element.", "default": "None"}, {"name": "exclude_from_tab_order", "type": "bool | None", "description": "Whether the element should be excluded from the tab order.", "default": "None"}, {"name": "aria_active_descendant", "type": "str | None", "description": "Identifies the currently active element when DOM focus is on a composite widget, textbox, group, or application.", "default": "None"}, {"name": "aria_auto_complete", "type": "Literal['true', 'false'] | bool | Literal['inline', 'list', 'both', 'none'] | None", "description": "Indicates whether inputting text could trigger display of one or more predictions of the user's intended value for an input and specifies how predictions would be presented if they are made.", "default": "None"}, {"name": "aria_haspopup", "type": "Literal['true', 'false'] | bool | Literal['menu', 'listbox', 'tree', 'grid', 'dialog'] | None", "description": "Indicates the availability and type of interactive popup element, such as menu or dialog, that can be triggered by an element.", "default": "None"}, {"name": "aria_label", "type": "str | None", "description": "The label for the element.", "default": "None"}, {"name": "aria_labelledby", "type": "str | None", "description": "The id of the element that labels the current element.", "default": "None"}, {"name": "aria_describedby", "type": "str | None", "description": "The id of the element that describes the current element.", "default": "None"}, {"name": "aria_details", "type": "str | None", "description": "The id of the element that provides additional information about the current element.", "default": "None"}, {"name": "aria_errormessage", "type": "str | None", "description": "The id of the element that provides an error message for the current element.", "default": "None"}, {"name": "UNSAFE_class_name", "type": "str | None", "description": "A CSS class to apply to the element.", "default": "None"}, {"name": "UNSAFE_style", "type": "Dict[str, Any] | None", "description": "A CSS style to apply to the element.", "default": "None"}, {"name": "key", "type": "str | None", "description": "A unique identifier used by React to render elements in a list.", "default": "None"}]}} />