Skip to main content

Documentation Index

Fetch the complete documentation index at: https://mintlify.com/Avendaosander/Plataforma-social/llms.txt

Use this file to discover all available pages before exploring further.

The Input component is a styled wrapper around the native HTML <input> element that applies the project’s consistent ring border, background, and typography tokens. InputWithIcon extends it with an icon button anchored in the trailing position and an onSubmit callback, making it suitable for search bars and inline comment fields. Both components use clsx and tailwind-merge for class composition, and both fully support dark mode via Tailwind’s class strategy.

​
Input

import Input from "@/components/ui/Input"
Input accepts the full set of React.InputHTMLAttributes<HTMLInputElement> props — type, name, id, value, onChange, placeholder, disabled, autoComplete, and all other standard attributes — forwarded directly to the underlying <input> element. An optional className prop is merged on top of the base styles via twMerge, so you can extend or override individual Tailwind classes without duplication.

​
Base styles

The following Tailwind classes are applied by default and can be overridden via className:
TokenLight modeDark mode
Borderring-1 ring-seagreen-950dark:ring-white
Backgroundbg-storm-50dark:bg-storm-900
Texttext-seagreen-950dark:text-white
Placeholderplaceholder:font-mediumdark:placeholder:text-white/50
Shaperounded-lg—
Spacingpy-1 px-3—
Outlineoutline-none—

​
Usage

<Input
  type="email"
  placeholder="correo@gmail.com"
  id="email"
  name="email"
  value={formState.email}
  onChange={e => handleChange(e)}
/>

​
InputWithIcon

import InputWithIcon from "@/components/ui/InputWithIcon"
InputWithIcon composes the same input styles into a pill-shaped container (rounded-full) that holds the <input> on the left and an icon button on the right, separated by a 1px vertical divider. The container is capped at max-w-[400px] and stretches to w-full within that limit. The inner <input> uses bg-inherit so it blends into the container background rather than applying its own fill.

​
Additional props

​
endContent
ReactNode
required
The icon or element displayed in the trailing button slot. Clicking the button triggers onSubmit. A common pattern is passing a SearchIcon or MessagePlusIcon here.
​
onSubmit
() => void
required
Called when the user clicks the trailing icon button. Wire this to your search handler or comment submission function. The component does not handle Enter-key submission internally — add an onKeyDown handler via ...rest if keyboard submission is needed.
​
...rest
React.InputHTMLAttributes<HTMLInputElement>
All standard input attributes — type, value, onChange, placeholder, disabled, etc. — forwarded to the inner <input> element. An optional className is also accepted and merged onto the inner input’s class list.
<InputWithIcon
  type="text"
  placeholder="Buscar"
  value={searchText}
  onChange={e => setSearchText(e.target.value)}
  endContent={<SearchIcon className="size-5" />}
  onSubmit={handleSubmit}
/>

​
Usage in comment input

<InputWithIcon
  type="text"
  placeholder="Deja tu comentario aqui"
  endContent={<MessagePlusIcon />}
  onSubmit={() => {}}
/>

​
Dark Mode

Both components follow the darkMode: 'class' configuration in tailwind.config.ts. The dark class is toggled on the <html> element at runtime — no additional configuration is needed inside the components themselves.
InputWithIcon applies its dark mode tokens (dark:bg-storm-900, dark:ring-white, dark:text-white) on the outer container <div> rather than the inner <input>. This ensures the pill border and background switch together as a unit.

Build docs developers (and LLMs) love

Get started for freeTalk to us