<InputGroup.Root>
<InputGroup.Addon>
<MagnifyingGlassIcon />
</InputGroup.Addon>
<InputGroup.Input placeholder="Search freelancers…" />
</InputGroup.Root>align="inline-end" puts an addon on the trailing side. The group owns the
border and the focus ring, so the input inside it has none of its own — which
is why it is InputGroup.Input and not Input.
InputGroup.Textarea does the same for a multi-line field.
API
InputGroup.Root
Plus every <fieldset> prop. Source: input-group/components/input-group-root.tsx.
InputGroup.Addon
| Prop | Type | Default | |
|---|---|---|---|
align | "block-end" | "block-start" | "inline-end" | "inline-start" | "inline-start" |
Plus every <div> prop. Source: input-group/components/input-group-addon.tsx.
InputGroup.Button
| Prop | Type | Default | |
|---|---|---|---|
loading | boolean | — | Show a leading spinner and mark the button aria-busy, disabling
interaction while an async action is in flight (e.g. a form submit). |
shape | "default" | "pill" | — | pill forces a fully rounded button; default follows the theme's
--radius, so it changes with the brand. |
size | "icon-sm" | "icon-xs" | "sm" | "xs" | "xs" | |
type | "button" | "reset" | "submit" | "button" | |
variant | "brand" | "default" | "destructive" | "ghost" | "highlight" | "link" | "outline" | "primary" | "secondary" | "ghost" | Weight of the action. default is the one thing the page exists for, at
most one per view; secondary an equal-weight alternative; outline
for toolbars and anything that repeats in a row; ghost inside dense
surfaces; destructive for what cannot be undone; link for an action
that reads as navigation. |
className | string | ((state: ButtonState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
focusableWhenDisabled | boolean | — | Whether the button should be focusable when disabled. |
nativeButton | boolean | — | Whether the component renders a native <button> element when replacing it
via the render prop.
Set to false if the rendered element is not a button (for example, <div>). |
render | ComponentRenderFn<HTMLProps, ButtonState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: ButtonState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
Plus the DOM props of the element it renders. Source: input-group/components/input-group-button.tsx.
InputGroup.Input
| Prop | Type | Default | |
|---|---|---|---|
className | string | ((state: InputState) => string | undefined) | — | CSS class applied to the element, or a function that returns a class based on the component's state. |
defaultValue | string | number | readonly string[] | — | The default value of the input. Use when uncontrolled. |
onValueChange | ((value: string, eventDetails: { reason: "none"; event: Event; cancel: () => void; allowPropagation: () => void; isCanceled: boolean; isPropagationAllowed: boolean; trigger: Element | undefined; }) => void) | — | Callback fired when the value changes. Use when controlled. |
render | ComponentRenderFn<HTMLProps, InputState> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
style | CSSProperties | ((state: InputState) => CSSProperties | undefined) | — | Style applied to the element, or a function that returns a style object based on the component's state. |
value | string | number | readonly string[] | — | The value of the input. Use when controlled. |
Plus the DOM props of the element it renders. Source: input-group/components/input-group-input.tsx.
InputGroup.Text
| Prop | Type | Default | |
|---|---|---|---|
render | ComponentRenderFn<HTMLProps, {}> | ReactElement<unknown, string | JSXElementConstructor<any>> | — | Allows you to replace the component's HTML element
with a different tag, or compose it with another component. Accepts a ReactElement or a function that returns the element to render. |
Plus every <span> prop. Source: input-group/components/input-group-text.tsx.
InputGroup.Textarea
Plus the DOM props of the element it renders. Source: input-group/components/input-group-textarea.tsx.