[blocks]: Inputs with left/right adornment,helperText & label #3469
Closed
timurbesli
started this conversation in
Blocks Request
Replies: 2 comments
-
Here is my Implementation by customizing the Input Component from shadcn components <Input
startAdornment="$"
endAdornment="per 30-min"
label="Bonus Value"
helperText="Enter the bonus value per 30-min.">
</Input> Customized props for optional label,helperText,startAdornement and endAdornment parameters. _(start and end adororments are ReactNodes so you can pass icons & stuff like the password hide/show eye icon) export interface InputProps extends React.InputHTMLAttributes<HTMLInputElement> {
label?: string;
helperText?: string;
startAdornment?: React.ReactNode;
endAdornment?: React.ReactNode;
} Here is the customized input component using these props. const Input = React.forwardRef<HTMLInputElement, InputProps>(({ className, type, label, helperText, startAdornment, endAdornment, ...props }, ref) => {
return (
<div className="flex flex-col">
{label && <label className="mb-1 text-sm text-gray-700">{label}</label>}
<div
className={cn(
"flex items-center h-10 w-full rounded-md border border-input bg-background text-sm ring-offset-background disabled:cursor-not-allowed disabled:opacity-50",
className
)}>
{startAdornment && <span className="px-3 text-sm text-muted-foreground">{startAdornment}</span>}
<input
type={type}
className={cn("flex-1 px-3 py-2 placeholder:text-muted-foreground focus:outline-none focus:ring-2 focus:ring-primary focus:ring-offset-2 disabled:opacity-50")}
ref={ref}
{...props}
/>
{endAdornment && <span className="px-3 text-sm text-muted-foreground">{endAdornment}</span>}
</div>
{helperText && <span className="mt-1 text-xs text-muted-foreground">{helperText}</span>}
</div>
);
});
Input.displayName = "Input"; |
Beta Was this translation helpful? Give feedback.
0 replies
-
Here is another implementation:
|
Beta Was this translation helpful? Give feedback.
0 replies
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
-
Description
This would be super good to have on Inputs
https://mui.com/material-ui/react-text-field/
Example
https://mui.com/material-ui/api/input-adornment/
Beta Was this translation helpful? Give feedback.
All reactions