A price selector component that displays predefined price options in a horizontally scrollable container with automatic centering. Includes an optional custom amount input field with validation.
Basic Usage
import { InputPrice } from '@adoptaunabuelo/react-components';
function DonationForm() {
const [amount, setAmount] = useState(15);
return (
<InputPrice
options={[
{ price: 9 },
{ price: 15 },
{ price: 20 }
]}
currency="€"
defaultOption={15}
onChange={(price) => setAmount(price)}
/>
);
}
With Dynamic Label
Use the label prop with {{value}} placeholder to show dynamic calculations based on the selected price.
<InputPrice
options={[
{ price: 9 },
{ price: 15 },
{ price: 20 }
]}
currency="€"
label="Nos ayudas a cumplir el sueño de {{value}} abuelos"
labelValueConversion={0.2}
defaultOption={15}
onChange={(price) => setDonationAmount(price)}
/>
With Feature Data
Display feature lists below each price option with icons from Lucide React.
<InputPrice
options={[
{
price: 9,
data: [
{
title: "Financias la campaña Una Carta Para Un Abuelo",
icon: "Mail"
},
{
title: "Nos ayudas a acompañar a 3 personas mayores",
icon: "Heart"
}
]
},
{
price: 15,
data: [
{
title: "Financias la campaña Una Carta Para Un Abuelo",
icon: "Mail"
},
{
title: "Nos ayudas a acompañar a 3 personas mayores",
icon: "Heart"
},
{
title: "Podemos celebrar el cumpleaños de 2 personas mayores",
icon: "Cake"
}
]
},
{
price: 20,
data: [
{
title: "Financias la campaña Una Carta Para Un Abuelo",
icon: "Mail"
},
{
title: "Nos ayudas a acompañar a 3 personas mayores",
icon: "Heart"
},
{
title: "Podemos celebrar el cumpleaños de 2 personas mayores",
icon: "Cake"
},
{
title: "Podemos cumplir el sueño de una persona mayor",
icon: "Rocket"
}
]
}
]}
currency="€"
customAmountData={
<Text type="c1">
Si quieres, puedes colaborar con una cantidad mayor y que
podamos hacer muchas más cosas. Añade la cantidad que prefieras.
</Text>
}
onChange={(price) => setDonationAmount(price)}
/>
Hide Custom Amount
<InputPrice
options={[
{ price: 9 },
{ price: 15 },
{ price: 20 }
]}
currency="€"
hideCustomAmount={true}
onChange={(price) => setDonationAmount(price)}
/>
Props
Predefined price options (scrollable horizontally).Each option object:
price (number, required): The price valuedata (array, optional): Optional feature list shown below price with icons
title (string): Feature description texticon (string, optional): Lucide icon name (e.g., “Check”, “Coffee”, “Heart”)
Currency symbol (e.g., ”€”, ”$”).
Pre-select an option by price value.
Floating label above options. Use {{value}} placeholder for dynamic calculation based on labelValueConversion.
Multiplier for {{value}} in label (e.g., 0.1 converts 100€ to “10 coffees”).
Hide custom amount input field.
Custom element shown below custom amount input.
Callback with selected/entered price. Validates minimum price from the first option.
Custom styles for the container.
Custom styles for the options container.
Features
- Automatic Centering: Selected option automatically scrolls to center
- Number Formatting: Uses Spanish locale formatting with thousand separators
- Minimum Validation: Custom input validates against minimum price (first option)
- Dynamic Font Sizing: Automatically adjusts font size based on price length
- Hover States: Interactive hover effects on all price options
- Error Display: Shows error message when custom amount is below minimum
