v1.0.0 • MIT License

Geografía de Chile
fácil para devs

Librería completa para regiones, provincias y comunas. Includes ISO codes, CUT, and cascading select helpers.

npm install chilean-territorial-divisions
Ver Demo Ver en npm
Scroll

Características

Todo lo que necesitas para formularios y datos geográficos

⚡

Zero Dependencies

Sin dependencias externas pesadas. Solo los datos que necesitas.

📘

TypeScript First

Tipos robustos para Regiones, Provincias y Comunas incluidos.

🔄

Select Helpers

Funciones listas para usar en dropdowns en cascada (Región → Comuna).

🔍

Búsqueda

Encuentra comunas por código CUT, nombre o ISO 3166-2.

📦

ESM & CJS

Soporte dual para importaciones modernas y legacy.

🏛️

Datos Oficiales

Basado en la última división política administrativa oficial.

Demo Interactivo

Prueba los selects en cascada

Cascada Completa

Selección con 3 niveles: Región → Provincia → Comuna

Código de ejemplo

import { 
  getRegionOptions, 
  getProvinciaOptions, 
  getComunaOptions,
  SelectOption
} from 'chilean-territorial-divisions';

// 1. Load regions
const regiones: SelectOption[] = getRegionOptions();

// 2. On region change
const provincias = getProvinciaOptions(regionNumber);

// 3. On province change
const comunas = getComunaOptions(regionNumber, provinciaName);
import { useState } from 'react';
import { getRegionOptions, getProvinciaOptions, getComunaOptions } from 'chilean-territorial-divisions';

export function AddressForm() {
  const [region, setRegion] = useState('');
  const [provincia, setProvincia] = useState('');
  const [comuna, setComuna] = useState('');

  return (
    <>
      <select value={region} onChange={e => { setRegion(e.target.value); setProvincia(''); }}>
        {getRegionOptions().map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <select value={provincia} onChange={e => setProvincia(e.target.value)} disabled={!region}>
        {getProvinciaOptions(region).map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <select value={comuna} onChange={e => setComuna(e.target.value)} disabled={!provincia}>
        {getComunaOptions(region, provincia).map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </>
  );
}
import { Component } from '@angular/core';
import { getRegionOptions, getProvinciaOptions, getComunaOptions, SelectOption } from 'chilean-territorial-divisions';

@Component({ selector: 'app-address', template: `
  <select [(ngModel)]="region" (change)="onRegionChange()">
    <option *ngFor="let r of regiones" [value]="r.value">{{r.label}}</option>
  </select>
  <select [(ngModel)]="provincia" (change)="onProvinciaChange()" [disabled]="!region">
    <option *ngFor="let p of provincias" [value]="p.value">{{p.label}}</option>
  </select>
  <select [(ngModel)]="comuna" [disabled]="!provincia">
    <option *ngFor="let c of comunas" [value]="c.value">{{c.label}}</option>
  </select>
` })
export class AddressComponent {
  regiones = getRegionOptions();
  provincias: SelectOption[] = [];
  comunas: SelectOption[] = [];
  region = ''; provincia = ''; comuna = '';

  onRegionChange() { this.provincias = getProvinciaOptions(this.region); }
  onProvinciaChange() { this.comunas = getComunaOptions(this.region, this.provincia); }
}

Región → Comuna Directa

Selección rápida sin pasar por provincia

Código de ejemplo

import { 
  getRegionOptions, 
  getComunaOptions,
  SelectOption
} from 'chilean-territorial-divisions';

// 1. Load regions
const regiones: SelectOption[] = getRegionOptions();

// 2. On region change - load ALL comunas directly
const comunas = getComunaOptions(regionNumber);
// ^ No second param = all comunas of the region
import { useState } from 'react';
import { getRegionOptions, getComunaOptions } from 'chilean-territorial-divisions';

export function SimpleAddressForm() {
  const [region, setRegion] = useState('');
  const [comuna, setComuna] = useState('');

  return (
    <>
      <select value={region} onChange={e => { setRegion(e.target.value); setComuna(''); }}>
        {getRegionOptions().map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
      <select value={comuna} onChange={e => setComuna(e.target.value)} disabled={!region}>
        {getComunaOptions(region).map(o => <option key={o.value} value={o.value}>{o.label}</option>)}
      </select>
    </>
  );
}
import { Component } from '@angular/core';
import { getRegionOptions, getComunaOptions, SelectOption } from 'chilean-territorial-divisions';

@Component({ selector: 'app-simple-address', template: `
  <select [(ngModel)]="region" (change)="onRegionChange()">
    <option *ngFor="let r of regiones" [value]="r.value">{{r.label}}</option>
  </select>
  <select [(ngModel)]="comuna" [disabled]="!region">
    <option *ngFor="let c of comunas" [value]="c.value">{{c.label}}</option>
  </select>
` })
export class SimpleAddressComponent {
  regiones = getRegionOptions();
  comunas: SelectOption[] = [];
  region = ''; comuna = '';

  // Load ALL comunas when region changes
  onRegionChange() { this.comunas = getComunaOptions(this.region); }
}

API Reference

Funciones principales

Función Descripción Retorna
getRegiones() Obtiene todas las regiones Region[]
getRegionOptions() Opciones para select de regiones SelectOption[]
getProvinciaOptions(region) Opciones de provincias por región SelectOption[]
getComunaOptions(region, prov?) Opciones de comunas (filtrado opcional) SelectOption[]
getComunaByCode(cut) Busca comuna por código CUT ComunaSearchResult
searchComunas(query) Busca comunas por texto ComunaSearchResult[]