NumberStepper

import { NumberStepper } from '@app/forms/NumberStepper.styled'

Interactive Preview

Code Example

NumberStepper Props

Component Props

Name

Description

Default

Preview

value

number

min

number

max

number

step

number

placeholder

string

disabled

boolean

readOnly

boolean

startFromPlaceholder

If true, the stepper will start from the placeholder value when pressing the +/- controls when the input is empty

boolean

hasError

boolean

className

string

pressableClassName

string

textInputClassName

string

placeholderClassName

string

placeholderTextColor

string

Props Schema

Show Props Schema

const NumberStepperProps = z.object({
    value: z
        .number()
        .optional(),
    min: z
        .number()
        .optional(),
    max: z
        .number()
        .optional(),
    step: z
        .number()
        .default(1),
    placeholder: z
        .string()
        .optional()
        .example("Enter number..."),
    disabled: z
        .boolean()
        .optional(),
    readOnly: z
        .boolean()
        .optional(),
    startFromPlaceholder: z
        .boolean()
        .optional()
        .describe("If true, the stepper will start from the placeholder value when pressing the +/- controls when the input is empty"),
    hasError: z
        .boolean()
        .optional(),
    className: z
        .string()
        .optional(),
    pressableClassName: z
        .string()
        .optional(),
    textInputClassName: z
        .string()
        .optional(),
    placeholderClassName: z
        .string()
        .optional(),
    placeholderTextColor: z
        .string()
        .optional(),
})

💡 Could be handy to copy-paste into an AI chat?

Props Type

Show Props Types

{
    value?: number;
    min?: number;
    max?: number | undefined;
    step?: number;
    placeholder?: string | undefined;
    disabled?: boolean;
    readOnly?: boolean;
    /** If true, the stepper will start from the placeholder value when pressing the +/- controls when the input is empty */
    startFromPlaceholder?: boolean;
    hasError?: boolean;
    className?: string | undefined;
    pressableClassName?: string | undefined;
    textInputClassName?: string | undefined;
    placeholderClassName?: string | undefined;
    placeholderTextColor?: string | undefined;
}

💡 Could be handy to copy-paste into an AI chat?

Source Code

File Location

You can find the source of the NumberStepper component in the following location:

- - - NumberStepper.styled.tsx

Other

Disclaimer - Automatic Docgen

🤖

These dynamic component docs were auto-generated with npm run regenerate-docs. You can hook into automatic docgen by exporting getDocumentationProps from a component file. You’ll want to provide example props from the ComponentProps zod schema, e.g:

NumberStepper.styled.tsx

/* --- Docs ---------------------- */
 
export const getDocumentationProps = NumberStepperProps.documentationProps('NumberStepper')

RadioGroup Checkbox