tetra-ui
uiaction-inputsource: ok · hit
Action Input
A component that allows a user to trigger an action and displays a value attached to the action.
npx shadcn add "https://tetra-ui.com/r/action-input.json"free
No selection tags yet — empty means no evidence, not lack of support.
Dependencies
Bundle weight · lightRegistry dependencies
@tetra-ui/icons@tetra-ui/input
Files1 · source cached 10/9/2026, 10:18:54 PM
ui/action-input.tsx
import { Text, View } from "react-native";
import { cn } from "@/lib/utils";
import { ChevronRightIcon } from "@/components/ui/icons";
import {
InputAddon,
type InputAddonChildren,
InputAddonIcon,
InputGroup,
type InputGroupProps,
useInputAddons,
} from "@/components/ui/input";
// Types
export type ActionInputProps = Omit<InputGroupProps, "children"> & {
value?: string;
placeholder: string;
children?: InputAddonChildren;
};
// Components
export const ActionInput = ({
value,
placeholder,
children,
className,
disabled,
invalid,
focused,
...props
}: ActionInputProps) => {
const { startAddons, endAddons, groupClassName } = useInputAddons(children);
return (
<InputGroup
accessibilityRole="button"
{...props}
className={cn(groupClassName, "pr-0", className)}
disabled={disabled}
focused={focused}
invalid={invalid}
>
{startAddons}
<View className="grow">
{value ? (
<Text className="text-base text-foreground">{value}</Text>
) : (
<Text className="text-base text-muted-foreground">{placeholder}</Text>
)}
</View>
{endAddons.length ? (
endAddons
) : (
<InputAddon align="inline-end">
<InputAddonIcon>
<ChevronRightIcon />
</InputAddonIcon>
</InputAddon>
)}
</InputGroup>
);
};