Pair a readable label with its corresponding value.
import { KeyValue } from '@vrum/ui';
<KeyValue
label={"Project owner"}
value={"Alex Morgan"}
layout={"inline"}
size={"md"}
/>| Prop | Type | Default | Description |
|---|---|---|---|
label* | React.ReactNode | none | Visible or accessible label. |
value* | React.ReactNode | none | Controlled value; connect the callback to application state. |
layout | "inline" | "stacked" | "inline" | layout configuration. |
size | "sm" | "md" | "lg" | "md" | Size of the component. |
labelProps | React.HTMLAttributes<HTMLElement> | none | label props configuration. |
valueProps | React.HTMLAttributes<HTMLElement> | none | value props configuration. |
defaultChecked | boolean | none | default checked configuration. |
defaultValue | string | number | readonly string[] | none | Initial value for an uncontrolled component. |
autoFocus | boolean | none | auto focus configuration. |
className | string | none | Additional CSS classes. |
id | string | none | id configuration. |
style | CSSProperties | none | Inline style overrides. |
aria-invalid | boolean | "false" | "true" | "grammar" | "spelling" | none | Indicates the entered value does not conform to the format expected by the application. |
aria-label | string | none | Defines a string value that labels the current element. |
children | ReactNode | none | Content rendered inside the component. |
onFocus | FocusEventHandler<HTMLDListElement> | none | on focus configuration. |
onBlur | FocusEventHandler<HTMLDListElement> | none | on blur configuration. |
onChange | ChangeEventHandler<HTMLDListElement, Element> | none | Called when the input value changes. |
onSubmit | SubmitEventHandler<HTMLDListElement> | none | Called when the form is submitted. |
onKeyDown | KeyboardEventHandler<HTMLDListElement> | none | on key down configuration. |
onClick | MouseEventHandler<HTMLDListElement> | none | Called when the control is activated. |
onSelect | ReactEventHandler<HTMLDListElement> | none | on select configuration. |