Forms

useFormFieldClasses

Composable interno per generare classi CSS coerenti per tutti i campi form.

Composable interno — utilizzato da InputText, Password, InputNumber, Textarea e altri campi form della libreria.

Firma TypeScript

export function useFormFieldClasses(options: UseFormFieldClassesOptions): FormFieldClassesResult

export interface UseFormFieldClassesOptions {
  componentPrefix: string;  // es: 'inputtext', 'password'
  props: FormFieldClassesProps;
  separator?: string;       // default: '-'
}

export interface FormFieldClassesProps {
  size?: MaybeRef<Size | undefined>;
  severity?: MaybeRef<Severity | undefined>;
  variant?: MaybeRef<FormVariant | string | null | undefined>;
  disabled?: MaybeRef<boolean | undefined>;
  readonly?: MaybeRef<boolean | undefined>;
  loading?: MaybeRef<boolean | undefined>;
  invalid?: MaybeRef<boolean | undefined>;
  error?: MaybeRef<string | null | undefined>;
  fluid?: MaybeRef<boolean | undefined>;
  rounded?: MaybeRef<boolean | undefined>;
  required?: MaybeRef<boolean | undefined>;
  prefixIcon?: MaybeRef<string | null | undefined>;
  suffixIcon?: MaybeRef<string | null | undefined>;
  hasPrefix?: MaybeRef<boolean | undefined>;
  hasSuffix?: MaybeRef<boolean | undefined>;
  showClear?: MaybeRef<boolean | undefined>;
  showCharacterCounter?: MaybeRef<boolean | undefined>;
  maxlength?: MaybeRef<number | undefined>;
}

export interface FormFieldClassesResult {
  wrapperClasses: ComputedRef<(string | false | undefined)[]>;
  labelClasses: ComputedRef<(string | undefined)[]>;
  inputClasses: ComputedRef<(string | false | undefined)[]>;
  sizeClasses: ComputedRef<string>;
  paddingClasses: ComputedRef<string[]>;
  variantClasses: ComputedRef<string>;
  roundedClasses: ComputedRef<string>;
  prefixClasses: ComputedRef<string[]>;
  suffixClasses: ComputedRef<string[]>;
  clearButtonClasses: ComputedRef<string[]>;
  helperTextClasses: ComputedRef<string[]>;
  errorTextClasses: ComputedRef<string>;
  counterClasses: ComputedRef<string[]>;
  showClearButton: ComputedRef<boolean>;
}

Parametri

Parametro	Tipo	Descrizione
`componentPrefix`	`string`	Prefisso CSS del componente (es. `'inputtext'`) → genera classi come `hs-inputtext-wrapper`
`props`	`FormFieldClassesProps`	Props reattive del componente
`separator`	`string`	Separatore classi (default: `'-'`)

Valore di Ritorno

Proprietà	Tipo	Descrizione
`wrapperClasses`	`ComputedRef<string[]>`	Classi del div wrapper
`inputClasses`	`ComputedRef<string[]>`	Classi dell'elemento input (include size, variant, rounded, padding)
`labelClasses`	`ComputedRef<string[]>`	Classi della label
`prefixClasses`	`ComputedRef<string[]>`	Classi del container icona prefix
`suffixClasses`	`ComputedRef<string[]>`	Classi del container icona suffix
`clearButtonClasses`	`ComputedRef<string[]>`	Classi del pulsante clear
`helperTextClasses`	`ComputedRef<string[]>`	Classi del testo helper
`showClearButton`	`ComputedRef<boolean>`	True se il clear button deve essere mostrato

Esempio

const {
  wrapperClasses,
  inputClasses,
  labelClasses,
  prefixClasses,
  suffixClasses,
  clearButtonClasses,
  helperTextClasses,
  errorTextClasses,
  counterClasses,
  showClearButton
} = useFormFieldClasses({
  componentPrefix: 'inputtext',
  props: toRefs(props)
})

Note

La classe variant segue questa priorita: error/invalid > disabled > variant prop > default.
paddingClasses aggiunge padding-left se c'e un prefix icon/slot, padding-right se c'e un suffix.
showClearButton e true solo se showClear=true E !disabled (il valore del modello viene controllato dal componente padre).
Funzione utility esportata: getCounterClasses(prefix, characterCount, maxlength) per calcolare le classi counter con stato exceeded.

useDropdownField

Composable interno aggregatore per componenti dropdown — raggruppa icone, componenti condivisi e re-export dei composables dropdown.

useFormFieldEvents

Composable interno per gestire gli event handlers comuni dei campi form (input, change, focus, blur, clear).